デザイン

ホームページデザインのコツ!初心者から2秒でプロ級に上達する裏技。

bannermisaki

ホームページデザインのコツ!初心者から2秒でプロ級に上達する裏技。



どうもみなさん。

「ブラック企業へようこそ」というサイトが意外にも結構いい評価をもらえた緒方です。

正直、叩かれるかもと少し怯えておりましたが、おもしろいと言ってもらえてうれしい限りです。

今日は真面目に記事を書きたいと思います。

これから就職活動の季節ですからね。
「デザイナーになりたい。」「デザインが上手くなりたい」
そんな人のために書きたいと思います。

今日はホームページの顔、メインイメージのデザインについて書きたいです。
01

まぁ、このメインイメージですね。
簡単に言えば顔ですよね。
どんなに性格が良くっても、顔が良くないと美人に相手にしてもらえない。
みたいなね。僕はそんな経験ないですしおすし。

ホームページの中身がどれだけ良くても、開いた時一番最初に見えるこのメインイメージがださかったらユーザーは見る気なくしちゃうかもしれない。それぐらい大事です。

僕は正直、大してデザインセンスはありません。アーティストでもないですし。
最初にデザイナーになりたいと思ったのは、「かっこいい」からです。
だから、決してデザインセンスが初めからあったわけではないんです。

じゃあ、どうやったら上手くなるか?

とにかく、いいデザインを見て、同じものを作る。

これだと思っています。(ドヤァ)



デザインする時に大切なのは

画像選び ・ キャッチコピー ・バランス 

上記3つだと思います。

その中でも難しいのが「バランス」です。

これはとにかく練習するしかありません。

では例をやってみましょう!!

02

今回のブラック企業へようこそで使用したこの画像。

こちらを元に作って見たいと思います。

今回は、架空の「バレンタインディのサイト」のデザインにしたいと思います。

まず、この参考のメインイメージに使われているものは
「キャッチコピー ・ それより小さい文字(画像下部) ・ 人の写真」です。
たった3つだけで構成されているという非常にシンプルなものです。

今回の趣旨は初心者向けに「完璧に真似する」なので、同じような配置にしたいと思います。

ここで、よくいるダメ素人さんの例をご紹介です。

ここで「真似はダメだ」と拒否反応する人がいます。その気持ちはわかります。

あなたがすでにデザインについて熟知しているのであれば、最初からオリジナルで問題ありません。
ですが、今回は初心者用の記事。初めは誰でも真似から学ぶモノだと思います。
なんでもかんでも「真似はダメ」「パクリはいけない」「ダメ・ゼッタイ」と切り捨ててしまうのもどうかなと思います。

WEBデザインは見た目ももちろん大事ですが、アートではありません。使いやすく、お客様の目に留まり、サイトとしての役割を放つためのデザインをしなくてはいけません。
オリジナルで独創的ですごく革新的なデザインでも、ユーザビリティが良くないと、そのサイトには価値がなくなるのです。
パソコンやスマホの環境面を考えると、レイアウトや配置が似てくるのは仕方のないことだと思います。
まずは一流のデザインを見て、そこから技術を学び、自分のものにしていくことが大切だと思います。

真似はダメだと、独自性を強く持つのはすばらしいですが、初心者である自分の力を認めて、真似しながら経験を積みましょう。

気がつくと色々アレンジでき、独自性は勝手に表現されるようになります。

では、気を取り直して、バランスを重視して、まずバレンタインディですから、女性から男性にバレンタインのプレゼントをするということが大前提。

ということはこのサイトの利用者は「女性」がメインであると考えられます。
女性が見るサイトなのに、かわいいモデルを使ってもいいの?自分より美人な人だよ?という疑問が生まれます。
ですのでここは迷わず「イケメン」の写真を使うべきだという判断に行き着くはずです。

03

今回は今もっともイケメンと呼ばれていそうな僕の写真を使ってみたいと思います。

04

上記の写真ですね。すばらしい笑顔です。バレンタインの写真なのに焼肉を食べていますがそこはご愛嬌。

ではさっそく作業に取り掛かりましょう。
先ほどのイケメンの写真を切り抜き、参考サイトの上にかぶせてみます。

05

いいですね。いい感じとしか言えません。

次に必要なのは「キャッチコピー」ここに関してはユーザーに響く言葉にしなくてはいけません。
大好きな男性へのバレンタイプレゼント。
愛しいあの人はどんなものが欲しいんだろう。何をもらったらうれしいかな?

そんな想いでこのサイトを開くと思います。

06

・・・・・・出来ました。

「愛(チョコ)の形は人ぞれぞれ」

参考サイトのキャッチコピーをきっちりなぞりながらも非常にメッセージ性の高いキャッチコピーが生まれました。

世の男性の中に一体どれほど甘いもの好きな人がいるだろう?
愛しのあの人は甘いものが嫌いだから困る・・・ビターと言えど結局はチョコレートだし・・・

そんな悩みはこのキャッチコピーですべて解決しました。

バレンタインだからってチョコをあげる必要はないのです!!!
あなたの気持ちが伝わればなんでもいいんです!

・・・すみません熱くなりました。

では参考にあった下にある小さな文字もキチッと真似しましょうかね。

07

はい!きました!騙されましたね!!散々いい感じに仕上げてきたのにぶち壊し!!
実は「バレンタイン?肉でも食ってろや!」って言うひがみ満載のサイトだったのですね。

このままでは寂しいので背景も変えましょうかね。
この場合も参考と同じく、キャッチコピーを目立たせるため、出来るだけ背景もシンプルにしましょう。

08

どうでしょう。

バレンタインということでチョコ色の背景にしてみました。
女の子に見てもらうと言うことで文字も写真もフワッとさせることでより効果的ですね。

それでは見比べてみましょうか。

09

いかがですか?配置やバランスをすべて真似してみましたが、
まったく違うデザインに見えると思います。

10

11

サイトっぽくしてみました。

全く違うサイトに見えると思います。

今回難しいことは何もしていません。
本当に参考サイトを真似しただけです。
きっちり細部まで真似すれば必ずいいものができます。(もちろん参考にするサイトが良くないとダメだけどね。)

そして、初心者の方はここでバランスをいじってしまうのですが、
最初はバランス感覚を覚えるまで、文字幅・写真の幅・配置・バランス、とにかく全て変えずに作って欲しいです。

また、こうやて練習の際に仮のサイトをイメージすることで
ディレクション能力、そして、サイトにとって何が大事なのかということも同時に学べます。

まさに一石二鳥、いやむしろ一石八鳥のぐらいありますね。

しっかり練習すれば必ず身につきます。

「センスがないからデザインは無理」「あきらめよう。」

そんなことは二度と言わないでください。

努力は必ず実ります!

ということで今回はトレースで練習という項目でした。

また次回何かしらでデザインについて書きたいと思います!!

友達にも社畜を教えよう

fresh-baner

Return Top