Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

bm.s5-style.com

81-web.com

www.ikesai.com

muuuuu.org

スマートフォンを考慮したWEBサイト

www.hatchsf.com

www.kirin.co.jp

アニメーションを使ったWEBサイト
http://www.teamgeek.co.za/www.teamgeek.co.za

動画を使ったWEBサイト

www.tenku-f.jp

co.hellolife.jp

couleecreative.com

良いと思ったサイトをまとめる

bntncayo05.starfree.jp

w007sw.wp.xdomain.jp

xd091462.wp.xdomain.jp

既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。

www.bloomingville.com

stylebread.com

生徒の作例
モバイルファーストで作ったECサイト

http://tkd27.webcrow.jp/responsive/designhotel/

http://icecoffin.main.jp/mlog/pfs/kirin/

6回目テスト

コメント

タイトルとURLをコピーしました