スタイリッシュなウェブページデザインを作成する方法（グラフィックチュートリアル）

「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。
デザイナー：「デザイン案に対する要件は何ですか？」
要求者：「まあ、もう少し寛大であってほしいですね！」
デザイナー：「…」
デザイナー：「何が不満だと思いますか？」
要求者: 「まあ、もう少し豪華だったらいいんですけどね!」
デザイナー: 「...」
デザイナー：「このビジュアルデザインをスタイルの観点からどう思いますか？」
要求者：「悪くないですね。もう少し豪華だったらよかったのですが。」
デザイナー：「…」
これらの会話はまったく誇張されたものではなく、同僚がよく不満を言う話題です。デザイナーたちはこの二つの言葉の前で何度もひざまずいてきました。
しかし、不平を言っても問題は解決しません。この厄介な形容詞を解決するにはどうしたらよいのでしょうか? 簡単な分析は、次の 2 つの異なるタイプのニーズから始まります。
1. ビジネス志向

シンプルなページスタイルはユーザーに好まれやすく、ユーザーに一定の安心感を与えることができます。 IBM を例に挙げると、ページが人々に与える第一印象はプロフェッショナリズムとセキュリティです。フォーカス画像の構成も比較的シンプルです。左側の目を引くスローガンにはシンプルなグラデーションが使われており、右側にもシンプルな幾何学的形状が使われています。以下の例も同様で、おなじみのApple公式サイトなど記載されていないものもあります。

ビジネス目的で設計する場合は、通常、次の 2 つの点に注意する必要があります。
1. 空白スペースを残す。大胆な空白スペースはページに空間感覚を与え、人々に息抜きの印象を与えます。ページの密度の高いコンテンツによる不快感を与えることはありません。
2. できるだけ少ない色を使用します。色が多すぎて、うまくコントロールされていないと全体のバランスが崩れやすくなります。デザインや制作の前に、主な配色と二次配色を決めておきましょう。上記のウェブサイトで使用されている色は、メインカラー 1 色、補助色 1 色、アクセントカラー 1 色と非常にシンプルであることがわかります。ビジネスページは主にコンテンツの閲覧と情報の表示に重点を置いており、訪問ユーザーに一定の安心感と信頼感をもたらすことができます。したがって、派手な要素の色や代替のデザインスタイルを使用しないことをお勧めします。
2. 活動の「雰囲気」
このタイプのページデザインでは、「壮大な」外観を実現するのはより複雑であり、上記の方法は使用できません。たとえば、開会式のページで白い背景、シンプルなグラフィックとテキスト、大きな空白スペースが使用されている場合、良い雰囲気が生まれない可能性があります。このような計画がしばしば却下される理由は、十分な雰囲気が作り出されないからです。したがって、素材を選択するときは、まず山、川、湖、海、パノラマ、または代表的な建物、ロゴなどを考慮し、次に「リボン、鳩、道路、屋根、教会、太陽、高貴な要素」などの肯定的な性質を持つデザイン要素を選択できます。

中国スタイルは、近年デザイナーが好んで使用しているデザインスタイルです。伝統的な中国の要素と最新のデザイン手法を組み合わせています。
代表的な要素としては、水墨画風、書道、古代の物（磁器、三脚など）などがあります。

上記は、著者の「壮大さ」についての単純な理解にすぎません。良いデザインは細部から始まるべきであり、シンプルなデザインスタイルであっても細部まで丁寧に扱うべきです。たとえば、かすかな影、光沢、軽いグラデーションの質感など。全体の状況を把握することによってのみ、自分のスタイルをコントロールすることができます。需要側との良好なコミュニケーション関係を構築し、デザイナー自身のアイデアや提案を表現するように努めます。設計案を修正する際、相手が求める「壮大さ」は、ある要素に問題があるだけかもしれませんが、どの部分に問題があるのかはわからないので、漠然とした概念でしか伝えられません。しかし、デザイナーとしては、慎重に考え、まずは新しいフォントを試したり、不要な要素を削除したりするなど、コンテンツの重要な部分を変更するように努めなければなりません。次に、レイアウトの変更を試します。つまり、探索と試行を続け、すべてのニーズを満たす必要があります。

<<: Vue3 における provide と inject の使用法と原則

>>: メタタグの詳しい説明（メタタグの役割）