WEB制作で食べている（@HEBOCHANS）です。
WEBデザインが思いつかない時に「こんなのあるよ？」をまとめました。
この記事はこんな人にオススメ
- WEBデザインが浮かばない。
- WEBサイト制作をデザイン込みで受けた。
- ポートフォリオサイトを作りたい。
もくじ
ヘッダーや画像に影をつけて浮かせる
当ブログのヘッダーや画像も必ず浮かせてます。
box-shadowが異常に好きみたいです。笑
サルワカさんの記事にはサンプル集もあって、わかりやすいですね。
【CSS】box-shadowで影をつける方法とサンプル集
CSSのbox-shadowを使って影をつける方法と、コピペで使えるCSSサンプルをいくつか紹介します。向きやぼかし方、色の変え方まで詳しく解説しています。
見出しを変える
見出しをオシャレにするのは基本ですよね。
こちらもサルワカさんの記事で、なんと見出しデザイン68選です！
他にも「見出しの左右をイラストの画像で囲ったり」「日本語の見出しの下に英語でサブタイトルを入れたり」と見出しで遊んじゃいましょう。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
フォントを変える
Google Fontsでフォントを変えるのは、デザインだけでなく、Mac/Winやブラウザ間の表示の差異をなくす効果もあります。
たくさん読み込むと重くなるので注意が必要です。
Google Fonts
Making the web more beautiful, fast, and open through great typography
Font Awesomeを使う
Font Awesomeでアイコンを使って、画像やテキストとメリハリをつけましょう。
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
グラデーションを取り入れる
背景や画像の上にグラデーションを取り入れるのは"あるある"ですかね。
グラデーションも異常に好きです。笑
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本 […]
背景にテクスチャを使う
テクスチャを使うだけで、ポップにしたり、ナチュラルで温かい印象を与えたり、効果はさまざまです。
こちらも重くならないように注意です。
デザインで悩んだときに役立つ背景画像のフリー素材配布サイト10選 | 株式会社LIG
デザインで背景に悩んだときのお助けサイトをまとめてみました。どれもクオリティが高く、無料で使えます。商用利用可のサイトもあるので、バナー作成やWebサイト作成の配色パターンなどでお悩みの際は覗いてみると良いアイデアが得られるかもしれません。
背景を斜めにする
これもよく見ますよね。
すでにレスポンシブ対応済みです。
きれいにレスポンシブ表示される斜めにカットされた背景をCSSだけで実現する - Qiita
最近LPなどでよく見る斜めにカットされた背景を実装する機会があったのですが、レスポンシブで様々な画面に対応するところでいろいろ考えた結果、画面幅での条件分岐なしでシンプルに実装できた...
背景を斜めにシャキーン！
斜めにした背景をスクロールしたタイミングで左右からシャキーン！と登場させるアレです。
【斜め背景】CSS＋jQueryでペンキを塗るようなアニメーションを簡単実装！ | スタッフブログ | クーネルワーク - 新潟 ホームページ制作
【斜め背景】CSS＋jQueryでペンキを塗るようなアニメーションを簡単実装！ | スタッフブログ | 株式会社クーネルワークは新潟市西区の総合WEBマーケティング会社です。WordPressを使用したホームページ制作を中心に、WEB戦略立案から、デザイン・システム開発、インターネット広告運用や解析までサポート可能です。新潟→全国対応、東京都内でのお打ち合わせも可能です。お気軽にお問い合わせください。
背景画像の下をカーブさせる
模写コーディングの定番「PAS-POL」のメインビジュアルでも使われていますね。
コンテンツの区切りを円弧で表現するCSS
最近のWebデザインは写真とタイポグラフィ、そしてシンプルな区切り（グリッド）などで表現されることも多く、その…
背景をVの字にする
SVGを使います。
逆Vの字にしたり、画像を用いたり、全パターンあります。
[パーツ]SVGヘッダー Vの字にカットされたヘッダー | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
svgを利用したコンテンツ切り替え。Vの字にカットされたヘッダーです。
パララックスを取り入れる
スクロールしても背景画像だけ固定されるアレです。
パララックス効果が秀逸なWebサイト＆作り方まとめ
「パララックスとは？」というところから、参考になりそうなWebデザインの紹介、作り方までまとめました。
テキストを縦書きにする
テキストを縦書きにすると、イメージが変わりますよね。
「和」なサイトには最適です。
CSS3で縦書きにする方法と挙動 - Qiita
たてよこWebアワードを見て、CSS3で縦書きをできることを知り、試さずにはいられなかったのでどのような挙動になるか簡単に説明をしたいと思います。知ったときには締め切っていたのが悔やまれる。
縦書きのレイアウト
縦書きWeb普及委員会
縦書きWeb普及委員会は、日本の文化である縦書きを利用したWebコンテンツの普及促進に取り組んでいます。
ステップを矢印で表現する
サイト制作でよく登場する「STEP 1」「STEP 2」「STEP 3」などのフローを矢印で表現するCSSです。
「サルワカさんの見出しデザイン」でも表現できそうです。
（ヘッダーとか見出しの要素を）片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた
片方だけ丸い・傾斜（台形・平行四辺形っぽく）・矢印のような形といった要素を、『boader-radius・transform: skew・before after擬似要素』CSSのみで作ってみます。
要素をタブで切り替える
個人的にbageleeさんのサイトが可愛くて好きです。
【CSS】CSSだけでタブ切り替えを作る方法
要素をずらして重ねる（ブロークングリッドレイアウト）
これもあるあるですよね。
いわゆる『ブロークングリッドレイアウト』というやつですが、
あくまで基本のグリッドレイアウトが出来ていないと、「ブロークン」することも出来ないのでオシャレさばかりに気を取られないことが大切です。
『ブロークングリッドレイアウト』の作り方はさまざまなので、参考にしたいサイトを見つけてChromeのデベロッパーツール（検証）とお友達になると良いです。
ボタンや画像を少しずらす程度なら「サルワカさんのbox-shadowで影をつける方法」で似たようなテクニックがあります。
ブロークングリッドデザインを成功させるために。
簡単！6つのポイント
「ブロークングリッドデザイン（レイアウト）」は、規則性のある境界線で構成されたレイアウトを一部分くずしたレイアウト…
フッターの上に背景画像
↑浮かせてます。
footerの上に背景画像を置くだけですが、シンプルで同じになりがちなフッターをちょっとオシャレにできます。
footerの上じゃなくてもいいんですけどね。
「デザイン力」より「引用力」
現代に1からデザインしてる人なんて存在しません。
みんな少なからず、どこかで見た何かに影響を受け、パクっています！笑
デザインは『デザイン力より引用力』です。
参考サイト一覧
おわり
今回は以上です。随時追加していきます。
これを読んでいるあなたも、ぜひ試してみてください！
一部、重複してますが以下もどうぞ。
サイト制作でよく使うCSS/jQuery 19選【コピペOK】
WEB制作で食べている（@HEBOCHANS）です。 WEB制作でよく使うCSS/jQueryをまとめました。 TOTO はにわまんさん多めで GIGLIO お送りしております。 この記事はこんな人に