menu
観たアニメは星の数、読んだ漫画は山のごとし。小鳥大好き独身アラサーの日常です。たまにWeb制作について書いています。
blog top

観たアニメは星の数、読んだ漫画は山のごとし。小鳥大好き独身アラサーの日常です。たまにWeb制作について書いています。

↓インコブログです。


Webサイトをデザインする【良いデザインを生み出すには?】

今回はいよいよ!サイトのデザインについて考えていきたいと思います。

【FC2・忍者・アメブロ・はてなブログ】無料ホームページ・ブログサービスを比較してみたでも書きかましたが、デザインのはじめは真似ることだと思ってます。

ゼロから生み出すのはとてもとても難しいものです。
でもいろんなサイトを見て、デザインを見て、それを自分なりに解釈して、もっとこうしたい、ああしたい…そうしていくと今までにない素敵なデザインが完成したりします!

大体サイトを2、3個に絞って見ていくと参考になります。

その参考サイトを選ぶポイントとしては
1️⃣カラーで選ぶ
2️⃣テイスト(かわいいとかかっこいいとか)で選ぶ
3️⃣作るサイトの業種やテーマで選ぶ
これの組み合わせかと思います。

今回はその際に大変便利なまとめサイト様をご紹介します!

Web系

🌟Webデザインの見本帳

Webデザイナーならみんな知ってるまとめサイト。
印象、色、ジャンルから探せるので、自分の求める参考サイトがきっと見つかります!
個人的に、厳選していいサイトを掲載しているイメージです。

🌟イケサイ

Webデザイナーなら以下略
業種カテゴリと色から探せます。
個人的に、更新頻度が高く新しい情報を確認できるイメージです。

🌟Web Design Clip

Webデザイナーなら以下略
上部メニューのメインカラー、サブカラー、レイアウト、カテゴリー、タグから探せます(知らなかった)。
採用サイトにも特化しているようです。

🌟bookma! v3

ググったら見つけました!
左メニューのリージョン(国内・国外)、カラー、バックグラウンドカラー、テイスト、カテゴリーから探せます。
バックグラウンドカラーからも探せるのはいいですね!

LP系

せっかくなので本業でお世話になってるLP(ランディングページ)版もご紹介します!

🌟LP アーカイブ

カラー、カテゴリ、イメージから探せます。
LPに関する記事もかなり勉強になるのでオヌヌメ。

🌟Web Design Clip [L]

Web Design ClipのLP版。
上部メニューのメインカラー、サブカラー、カテゴリー、タグから探せます(知らなかった)。

参考サイトを選んだら

好きな参考サイトを選んだらいよいよデザインしていきましょう。
がんばれ!!(丸投げ)

いやもうね、こればっかりはね…

ひとつ、私がよくやるのは、参考サイトを足して割ることです。
3つ選んだなら、それを全部足して3で割ったものを作ると、素早くいいものが作れます。
これぞなんちゃってWebデザイナー!(ドヤ顔でいうことじゃない)

試しに一つ作ってみた

例えばなんか青っぽくてかっこいい作品紹介サイトを作りたい!とします。

参考サイトを選びましょう!
今回は青で作りたいので青系のサイトを選んでみます!

なんかめっちゃかっこいい!

ビックリビッグローブモバイル

格安SIMが驚きの月額換算700円(税別)から | ビックリビッグローブモバイル
https://join.biglobe.ne.jp/mobile/special/

Bのアクセントも効いてます!

下層ページもめっちゃいい!

ナブコ自動ドア

ナブコ自動ドア
https://nabco.nabtesco.com/

青枠が良い感じです!
やっぱり白背景は画像が映えますね!

レイアウトめっちゃいい!

バルコムグループ 新卒採用

バルコムグループ 新卒採用
http://www.balcom.jp/recruit/fresh/

グリッドレイアウトは見ていて安心感があります!

——————————

ということで、なんか青くて白くてグリッドなかっこいい作品紹介サイトを作りましょう!!
このように、参考サイトを見ることでより具体的な完成イメージを得ることができます。

じゃん!

ててとポートフォリオをあわせてteteフォリオ(笑)

内容がないからあまり参考にならないけど、斜めの図形でグリッドで単調な中にも動きとスタイリッシュさをだしました。
青枠は全体がまとまってみえて、かつ、かわいいのでいいのですが、参考にあまり寄せすぎるとただの真似っこどんどんになるので、実際は入れないほうがいいかもですね~
でもこういう表現手法もあるのだと知っておくことはとても大切です!
いつか必ず役立ちます!!

よりよいイメージをもってよりよい形を作っていこう

いかがでしたでしょうか。

どんなサイトにしようか考えてる時が一番わくわくしますね!
今回の裏話としては例にするデザインが全然かっこよくできなくて地味に時間かかりました笑
デザインってむずかしいな~🙄

デザインは、はじめは真似ることからでも、だんだんと自分なりのイメージをもって、それをより具体的なものにしていって、あとは形を近づけていく作業だと思います。
言葉で書くのは簡単ですが、私は4年デザイン学部に通ってギリギリできるようになったかなって感じです。

良いデザインを作るには費やす時間も制作の時間もかかるけど、どれも大切なものだと思います。
あと沢山良いデザインを目にして吸収していくこと!
最高のものを生み出せるよう、あきらめずに続けていきたいですね。

※今回の方法はあくまでも個人の主観による一例です。

🎀WebデザイナーによるWebサイトの作り方はこちら!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

↓インコグッズブログです。

アンケートモニター登録