WEB制作

サイト制作で何も思い浮かばない時のデザイン案15選【コピペOK】

サイト制作で何も思い浮かばない時のデザイン案15選【コピペOK】

WEB制作で食べている(@HEBOCHANS)です。

WEBデザインが思いつかない時に「こんなのあるよ?」をまとめました。

TOTO
TOTO
でも大事なのはオシャレさより
GIGLIO
GIGLIO
使いやすさだよ

この記事はこんな人にオススメ

  • WEBデザインが浮かばない。
  • WEBサイト制作をデザイン込みで受けた。
  • ポートフォリオサイトを作りたい。

ヘッダーや画像に影をつけて浮かせる

当ブログのヘッダーや画像も必ず浮かせてます。

box-shadowが異常に好きみたいです。笑

サルワカさんの記事にはサンプル集もあって、わかりやすいですね。

見出しを変える

見出しをオシャレにするのは基本ですよね。

こちらもサルワカさんの記事で、なんと見出しデザイン68選です!

他にも「見出しの左右をイラストの画像で囲ったり」「日本語の見出しの下に英語でサブタイトルを入れたり」と見出しで遊んじゃいましょう。

フォントを変える

Google Fontsでフォントを変えるのは、デザインだけでなく、Mac/Winやブラウザ間の表示の差異をなくす効果もあります。

たくさん読み込むと重くなるので注意が必要です。
Google Fonts

Font Awesomeを使う

Font Awesomeでアイコンを使って、画像やテキストとメリハリをつけましょう。
Font Awesome

グラデーションを取り入れる

背景や画像の上にグラデーションを取り入れるのは”あるある”ですかね。

グラデーションも異常に好きです。笑

背景にテクスチャを使う

テクスチャを使うだけで、ポップにしたり、ナチュラルで温かい印象を与えたり、効果はさまざまです。

こちらも重くならないように注意です。

背景を斜めにする

これもよく見ますよね。

すでにレスポンシブ対応済みです。

背景を斜めにシャキーン!

斜めにした背景をスクロールしたタイミングで左右からシャキーン!と登場させるアレです。

背景画像の下をカーブさせる

模写コーディングの定番「PAS-POL」のメインビジュアルでも使われていますね。

背景をVの字にする

SVGを使います。

逆Vの字にしたり、画像を用いたり、全パターンあります。

パララックスを取り入れる

スクロールしても背景画像だけ固定されるアレです。

テキストを縦書きにする

テキストを縦書きにすると、イメージが変わりますよね。

「和」なサイトには最適です。

縦書きのレイアウト

ステップを矢印で表現する

サイト制作でよく登場する「STEP 1」「STEP 2」「STEP 3」などのフローを矢印で表現するCSSです。

「サルワカさんの見出しデザイン」でも表現できそうです。

要素をタブで切り替える

個人的にbageleeさんのサイトが可愛くて好きです。

要素をずらして重ねる(ブロークングリッドレイアウト)

これもあるあるですよね。

いわゆる『ブロークングリッドレイアウト』というやつですが、

あくまで基本のグリッドレイアウトが出来ていないと、「ブロークン」することも出来ないのでオシャレさばかりに気を取られないことが大切です。

『ブロークングリッドレイアウト』の作り方はさまざまなので、参考にしたいサイトを見つけてChromeのデベロッパーツール(検証)とお友達になると良いです。

ボタンや画像を少しずらす程度なら「サルワカさんのbox-shadowで影をつける方法」で似たようなテクニックがあります。

フッターの上に背景画像

on-the-footer↑浮かせてます。

footerの上に背景画像を置くだけですが、シンプルで同じになりがちなフッターをちょっとオシャレにできます。

footerの上じゃなくてもいいんですけどね。

「デザイン力」より「引用力」

現代に1からデザインしてる人なんて存在しません。

みんな少なからず、どこかで見た何かに影響を受け、パクっています!笑

デザインは『デザイン力より引用力』です。

参考サイト一覧

おわり

今回は以上です。

随時追加していきます。

みなさんもぜひ試してみてください!

一部、重複してますが以下もどうぞ。

あわせて読みたい
サイト制作でよく使うCSS/jQuery 19選【コピペOK】
サイト制作でよく使うCSS/jQuery 19選【コピペOK】WEB制作で食べている(@HEBOCHANS)です。 WEB制作でよく使うCSS/jQueryをまとめました。 ...