
プロ直伝:本格的なウェブサイトの作り方
新社会人や転職を検討中の人は、自分をアピールするために、企業があなたのことをもっと知りたくなるようなすてきなウェブサイトがあると便利です。
とはいえ、実際に制作するとなると大変です。 SquarespaceのCCOを務めるデイヴィッド・リー(David Lee)とSquare eCommerce(元Weebly)でグロースハックのマーケティングの責任者シンディ・ルイス(Cindy Lewis)が、見栄えのいい本格的なウェブサイトに必要なものを説明します。
ウェブサイトとしての基本
本題に入る前に、ウェブサイトとして押さえておくべき3つの基本要素があるとルイスは話します。それは、わかりやすい導線、明確な見出し、意識を引きつける画像の3つです。ウェブサイトに掲載するコンテンツについては、経歴や作品をまとめたもの、連絡先情報、そして自己紹介文が必要です。ルイスは、連絡先情報に数種類の連絡方法を掲載するのが望ましいとして、連絡用フォーム、メールアドレス、SNSのアカウントなどを挙げています。
リーはよく考えて自己紹介文を書くことを勧めています。ほかの人の自己紹介文の書き方を調べれば、「たくさんのことが学べる」とのこと。
「自己紹介文は、その人の人柄を感じてもらう絶好のチャンスです」とリーは話します。
リーの見解では、ウェブサイトで使うフォントや色に決まった方法はないそうですが、ウェブページの中心であるコンテンツの邪魔になるフォントや色は使わないように注意しています。
「コンテンツや作品が主役になるようにしましょう」
Helvetica(サンセリフ)やBaskerville(セリフ)など、昔からよく使われているフォントを使ったり、サンセリフとセリフのフォントを組み合わせて普遍的な見た目にするのはよいでしょう。ルイスは、Droid Sans、Lato、Ubuntuなど、ウェブサイトで広く使われているサンセリフのフォントを使うことを勧めています。セリフのフォントとして勧めているのは、Abril Fatface、Arvo、Josefin Slabです。
「色と同じで、フォント選びはその人の人柄を表し、印象に影響します」とルイスは話します。
色使いでは、ウェブサイトのデザインを決める上でカラーパレットツールの使用を勧めています。一見、色選びは簡単そうに思えますが、ルイスはここでもしっかりと時間をかけて、コントラストを際立たせつつ、互いを補うような色を選ぶように、とアドバイスしています。
「色のコントラストを作ることで意識を引き付けたり、主要なアクションボタンを目立たせたりしましょう。それ以外のアクションボタンやビジュアル面で重要度の低いコンテンツには二次色を使います」
ウェブサイトの〇と×
- 〇:「自分の人柄を表すウェブサイトにしましょう」(ルイス)- 経歴や功績に関すること以外の情報も掲載するといいでしょう。現在のあなたが働いている業種(もしくは、これから参入しようとしている業種)で何ができるのかをわかりやすく書きましょう。「将来の雇用主やクライアントに対して、どんな仕事相手になれるのか感じてもらえるようにしましょう。全体としては、自分のことをよりよく知ってもらうことが目的です。」
- ×:「URLを軽視してはいけません。」(ルイス)ー SNS、経歴書、名刺と同じように、URLも社会人としてのあなたの一部を見てもらうウェブサイトの構成要素なのだとルイスは話します。「購入するドメインを決めるとき、社会人としてのあなたにふさわしいかはもちろんですが、URLを口頭で伝えやすいものにすることも忘れないようにしてください」
- 〇:「レスポンシブなデザインに」(リー)ー いろいろなデバイスから見やすいウェブサイトにしましょう。掲載する画像やコンテンツが各種画面内にちゃんと収まるようにするだけでなく、携帯電話からのアクセスでも読み込みがすばやく行われることを確認するようにします。「あなたの活動について、さらに詳しい情報を見るかどうかは閲覧者が選択できるようにして、初めからすべての情報を無理やり表示させないようにしましょう。連絡先が知りたいだけの可能性もあります」
- ×:「掲載する作品の説明を忘れないように」(リー)ー ウェブサイトのデザインをよく考えたら、何を掲載するか決めます。よくある失敗例は、適当な作品や企画を並列して、印象が悪くなることです。リーは次のように話します。「その作品が生まれた経緯や独特である理由を説明するようにしましょう。うまく説明できない場合は、実は特筆すべき作品ではないのかもしれません」
- 〇:「SEOを考慮しましょう」(リー) ー リーが勧めるシンプルな方法は、数回、ウェブサイト上で自分がデザイナーであることを明記することです(あなたがデザイナーの場合)。ほかにも、titleタグやdescriptionタグなど、メタタグを最適化するとよいでしょう。
この記事は、アン・マリー・アルカンタラ(Ann-Marie Alcántara)がAdweekで執筆しました。パブリッシャーネットワークを行うNewsCredを通じてライセンスされています。ライセンスに関するご質問は、legal@newscred.comへ直接ご連絡ください。