Loading

プレオ日誌

blog

ホームページのデザインってどうつくっているの?

ご存知の方も多いかと思いますが、プレオデザインでは
webデザイナー、システムエンジニア、グラフィックデザイナーなど、
社内や連携パートナーとチームを組み案件をお手伝いさせていただいています。

私(河)はその中でも“ホームページのデザイン”を担当しているのですが、
ホームページデザインのつくりかた”と聞いて
具体的にどんなことをするのかピンとくる方はどのくらいいらっしゃるでしょうか?

「色とか、見た目を考えるのかな?」
「写真や文章をいい感じに並べるのでしょう?」

など、様々なイメージがあるかと思います。

また、
「全然想像できないなぁ」
という方も多いと思います。
私自身、デザインに関わるまではどんなことをしているのか、いまいち分かりませんでした。

少しでもホームページのデザインに興味のある方は
ぜひ読み進めてみてくださいね。

※当記事では詳細なヒアリング(相談・打ち合わせ)とサイトマップ(ホームページにどんなページを設けるのか)が決まってからのデザインの流れを紹介しています。またデザイナーさんや会社によってやり方は違うと思いますので、あくまで一例として紹介しています。

大まかな流れ(プレオデザインの場合)

ホームページ制作会社さんや個人によって多少の違いはあると思いますが、
当社ではだいたい以下流れで進めていきます。

1、全体の構成案作成(サムネイル)
2、ページごとの構成案作成(ラフ)
3、デザインラフ作成
4、PCでデザイン制作
5、デザイン完成!

1、全体の構成案作成(サムネイル)

早速PCでデザインを!と思われがちですが、PCに向かうのは一番最後。
まずはペンと紙を用意し「このページにはこの内容を入れる」というような
とてもざっくりした全体のページ構成を考えていきます。(サムネイルとも言います)
色や形の事は考えず、情報の整理をしていきます。
サムネイルとは「親指の爪のように小さくて簡潔なもの」という意味からきているそうで、それくらい簡潔に。
この工程を人に見せることはほぼないので、それはそれは汚いです(笑)

【ここで考えていること】トップページには「コンセプト」「ワークス」「サービス内容」「お問い合わせボタン」を配置しよう

2、ページごとの構成案作成(ラフ)

サムネイルでページの内容がざっくりと決まったら、
もう少し詳しくそれぞれのページに入れる内容を考えていきます。
ここでもレイアウトや形など外見は考えません。

また、このラフを見ながらフロントエンドエンジニアと一緒に投稿機能や動きの相談をしたりします。
ホームページに入れる内容の整理整頓を行う目的で、
手書きラフをお客さんに確認をいただきく場合もあります。

【ここで考えていること】トップページのコンセプトは「写真とキャッチコピー、本文」が必要だな。ここを一番目立たせる。ワークスは「写真とタイトル」でリンクが必要。サービスは云々…

3、デザインラフ作成

PCのデザインはもう少し我慢!
ページ内容が固まったら次はレイアウトや形を決めていきます。
洗練したデザインなのか、あたたかみのある賑やかなデザインなのかなど、目的に応じて雰囲気を考えます。
どの工程でもそうですが、とにかくたくさんアイデアを出すよう心がけています。

【ここで考えていること】目立たせたいから大きくして文字と写真、イラストを組み合わせて1ビジュアルでみせよう、シンプルなパターンだったら云々・・・

4、PCでデザイン制作

TOPページデザイン制作

ここでようやくイラストレーターを使ってレイアウトや形、色を調整していきます。
まずはトップページから。
イラレ上で迷いそうになったらまたノートに戻り案だし→イラレで作業の繰り返し。

デザインが完成したらお客さんにご意見をいただき、一緒にHPをつくっていきます。

派生ページデザイン制作

トップページの方向性が決まったら派生ページをつくっていきます。
派生ページとはトップページ以外のページのこと。
こちらもレイアウトや形、色を調整していき、お客さんにご意見をいただきます。

5、デザイン完成!

デザインが完成したら、デザインデータをコーディング(webサイト化)していきます!
ここからはフロントエンドエンジニアにバトンタッチし、実装スタート。一緒に確認していきます。

まとめ!

初めてデザインの仕事に触れた時、個人的に一番驚いたのが「イラレを使うのは一番最後」ということでした。
普段なかなか知る機会のない、ホームページデザインのつくりかた。
少しでも「なるほど〜」と参考になれば嬉しいです(*^^*)

→ホームページ制作について詳しくはこちら

河島 綾香

この記事を書いた仲間

河島 綾香 webデザイナー

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る