WEB制作

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

web-design

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

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

TOTO

でも大事なのはオシャレさより

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さんのサイトが可愛くて好きです。

要素をずらして重ねる

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

必ず使っちゃいます。笑

これも「サルワカさんのbox-shadowで影をつける方法」で似たようなテクニックがあります。

フッターの上に背景画像

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

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

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

おわり

今回は以上です。

随時追加していきます。

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

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

プロフィール