説明

ウェブサイトデザインは、必ずしも優れた色の組み合わせやクリエイティブなソリューションが必要なわけではありません。ウェブサイトは、ユーザーや顧客を惹きつけ、彼らにとって有益な情報を掲載するという主機能を果たす必要があります。そのため、Web制作の初心者にとっては、どこからレイアウトに手をつければいいのか、どんな要素をどんな目的でサイトに掲載すればいいのか、正確に判断することが難しいのです。

ステップ1：サイトの目的を決める
目的は、サイトの種類や内容によって異なります。ウェブサイトは、営利・非営利を問いません。

非商用サイト。非商用サイトの主な目的は、オーディエンスに有益な情報を提供したり、トピックに注意を喚起することです。ニュースサイト、ブログ、慈善団体、コミュニティベースの組織などです。

商業施設。商用サイトの目的は、消費者にリーチし、商品を販売することです。商用サイトとは、Webページやオンラインショップ、商社のWebサイトなどを指します。また、情報提供型のウェブサイトでも、広告で収益を得れば営利目的となります。多くの人が訪れるサイトであれば、広告を掲載することで収入を得ることができます。そのため、ニュースサイトやブログが適しています。

ステップ2: ウェブサイトに必要な要素を決定する
クライアントの課題を解決できるサイトの目的とタイプが決まったら、サイトに必要な要素をリストアップする。サイトの種類によって、これらは異なる場合があります。

ステップ3：競合他社を分析する
競合他社のサイトを研究することで、興味深いデザインのアイデアを見つけたり、自分のサイトで忘れていることを理解したりすることができます。地域ビジネスであれば、お客様の地域の競合他社を調査する。全国展開している企業であれば、マーケットリーダーのウェブサイトに注目する。サイトの種類とそこにあるべきコンテンツが既に決まっている場合でも、競合他社から他の多くの情報を学ぶことができます。もしかしたら、あなたの意見も変わるかもしれません。

ここでは、競合他社のサイトを調査する際に気をつけるべきことを説明します。

競合他社のウェブサイトのタイプ – 競合他社が自分自身について話している場合でも、企業ポータルではなく、ブログ付きのウェブサイトや短い名刺ページを持っているかもしれません – 同じ情報が異なるフォーマットで表示されることがあります。
サイト要素 – 決済フォーム、コールバック、プロモーションバナー、ニュースレター購読、ブログ、個人アカウントなどに注目します。
コンテンツ – 記事の内容やトピックの量、動画や写真の有無、プロモーションの見せ方などを検証します。
フォント、色 – サイトが読みやすいかどうかに影響します。
セクションとフィルター – オンラインショップの場合、商品検索に重要です。

ステップ4：良いレファレンスを探す
参考文献は、ウェブサイトを構築する際に参考にできる事例です。競合他社やマーケットリーダーのサイトである可能性もあります。海外でも同様のインターネットリソースを探す。クライアントにどのサイトが好きか、自社にデザインはあるか、新しく作ることは可能か、などを聞く。色やフォント、コンテンツの中には、禁止されているものや逆に望ましいものがあるかもしれません。

スケッチとfigmaは、ほぼ同じ機能です。しかし、sketchはmacbookにしか対応していませんが、figmaではどのデバイスからでも、さらにはブラウザからでも作業することが可能です。Tildaは、シンプルなサイトやランディングページを作る必要がある場合に適しており、そこで大規模なオンラインショップを運営することは困難である。さらに、sketchからfigmaへ、figmaからtildaへファイルをインポートすることができます

ステップ6：プロトタイプを描く
プロトタイプとは、Webサイトのページ上の要素の配置や将来の機能を示すのに役立つレイアウトのことです。プロトタイプでは、ページを構成する要素に長方形と符号をつけ、それらが何であるか、どのような役割を担っているかを簡便に示しています。

ステップ7：構造を工夫する
これで、色分けができる精密な構造を設計することができます。

レイアウトの要素を配置するための白紙のキャンバスを作成します。色よりも形に注目するため、まずはモノクロで作業する。レイアウトからウェブサイトに要素を転送し、寸法を調整し、適切な場所に移動させます。整列させる。知覚しやすくするために、要素と要素の間にスペースを確保すること。このようにして、サイトの各ページに目を通す。

ステップ8：色とフォントを追加する
サイトのほとんどが出来上がっていると、あとは色やフォントの選択など、ちょっとしたことが残っているように思います。しかし、そうではありません。ユーザーが最初に目にするのは、この部分です。また、色が明るすぎたり、フォントが読めなかったりすると、ユーザーはサイトから離れてしまいます。

ステップ9：コンテンツを入れる
コンテンツの追加：記事、ビデオ、製品、画像、バナー広告。将来的に追加して更新することも可能です。

記事を公開する場合は、動画や写真を追加して、情報をわかりやすく伝える。本文と全く関係のない写真を挿入すると、注意をそらすだけなのでやめましょう。そこに何が描かれているのか、読者が推測する必要がないように、写真や動画にサインを入れる。また、メディアは画素が見えないような良質なものを使用する必要があります。