Webサイト制作の4ステップ

Webサイト制作の4ステップ – STEP3. デザイン作成 –

こんにちは!ブダペスト在住Webデザイナーのみほこです。

今回はWebサイト制作のステップについて、4回に分けて簡単に説明してみたいと思います。
サイト制作を依頼したら実際どのように進んでいくのか?をイメージしやすくなっていただければと思います。

なお、当事務所では、やり取りは基本的に全てオンラインで行っております。

STEP1. ヒアリング・ご提案
STEP2. 情報設計
STEP3. デザイン作成:こちらの記事です。
STEP4. 構築・公開:Coming soon!

今日はSTEP3. デザイン作成

STEP2で作成したワイヤーフレームに、デザインを肉付けしていきます。
(細かくいうと、情報設計も「デザイン」なのですが、、、ここでいうデザインは装飾のことですね。)

ブランディングもご依頼いただいている場合は、そこでデザインルールを決めていますので、それに従ってデザイン案を作成します。
そうでない場合は、ヒアリング時にご希望のデザインをお伺いしているので、それを参考にデザイン案を作成します。

いずれにしろ、競合他社をリサーチして、その業界の傾向を把握してから、デザインを進めます。
というのも、あまりに他社と乖離したようなデザインでは、顧客に受け入れられない可能性があるので、ある程度その業界らしさを残しつつもオリジナルのデザインを作成するようにしています。

極端な例ですが、歯医者さんのサイトを作成するのに、ピンクと赤を多用したデザインにしてしまうと、一目見て歯医者さんのサイトだとは想像しづらいですね。
現状、歯医者さんのサイトで多い色合いというのは、ブルー系。ベージュやモノトーンも最近多いかなと思います。

個性的なデザインというのは、時に強いブランディングになりますが、反面受け入れられにくい可能性もあります。ここはバランスが大事ですし、何よりもWebサイトの役割の第一は情報を見ることですので、いかに見やすく使いやすいデザインにするかが一番大事。
個性的な要素はエッセンス程度に追加するのが良いデザインのコツだと思います。

さて、デザイン案ですが、最初はまずパソコンで見た時のトップページのMVと呼ばれる箇所とその少し下くらいまでをデザインし、クライアントさんにお見せします。
MVというのは、メインビジュアルの略で、ファーストビューなどと呼ばれたりもするのですが、Webサイトを訪れたときにスクロールをしない状態で最初に表示される箇所のことです。

なおデザイン案は実際にサイトをオンライン上に構築していくわけではなく、AdobeのXDというデザイン用のツールで作成をします。

Design studio M.のサイトで言うと、この部分です。

これはもちろん、いきなり全体のデザインを終えてしまうと、デザインの修正が入った時に全て直さないといけないので、まずは小さい範囲をデザインしてデザインの大筋を決めてから全体のデザインに入った方がスムーズだからですね。

MV周りののデザインが決まったら、トップページ全体のデザインを作成し確認・調整、トップページのデザインが決まったら、下層ページを作っていきます。
それが終わったら、必要があればスマートフォンのデザインを作成します。こちらは、当事務所の場合は、パソコンで見たときとスマートフォンで見た時と、レイアウトやデザインを大幅に変える必要がある場合に行います。
デザインを大きく変える必要がない場合は、サイト構築をしながら同時にスマートフォンでも見やすいデザインに調整していきます。

デザインをする際、クライアントさんから使用したい素材や画像があれば頂戴しますが、ない場合は当事務所で有料素材を購入して使用します。
こちらは今の所(2024年11月、特殊な素材でない限り)追加費用なしで対応させていただいています。

実店舗ありのサービス系の事業の場合だと、実際のお店の様子がわかったほうがいいので、改めて撮影をお願いすることも多いです。
オーナーさんがスマートフォンでうまく撮影される場合もありますし、身近な方でカメラが趣味の方が撮影される場合や、もちろんカメラマンさんを雇われる方もいます。これは本当にさまざまで、どこまで予算を出せるかにもよりますが、基本的に写真のディレクションもやらせていただいています。

このような感じで、デザインが決まったら、次はいよいよサイト構築です。

それでは、また次回!