トップセクション
ここは非常に重要なセクションになります。 クライアントはフリーランスを選定する場合にまずはここを見ることになります。
もちろんほとんどのクライアントは忙しく、たくさんのページを見ていることでしょう。 時間に追われているのでWebサイトも検索して片っ端から素早く見ていることが想定されますね。
Webには5秒間ルールと言われるものがあります。 「5秒のうちに興味を惹かないと、閲覧者はすぐに他のページに移動してしまう」というものです。
これはクライアントもその例外ではありません。クライアントにも素早く自分のメッセージを伝えないとすぐに他の人のページに行ってしまいます。 そこで一番重要なのがこの「トップセクション」ということになります。
トップセクションでどのようなメッセージを伝えるべきかを説明します。
悪い例のポートフォリオ・トップセクション
まずは良くない例から言うと、よくわからない写真と「Mitsu Design」など自分のデザイナー屋号を書くだけのものです。 例えばこんな感じのものですね。これではクライアントが見た時にどのようなデザイナーなのかが伝わりません。 興味もわかないでしょう。すぐに次のサイトに移動されてしまいそうです。
良い例〜クライアントに未来を想像させる
成功のポイントは、クライアントに対して「一緒に作る未来」を想像させることです。 「この人と仕事したら今の課題を解決してくれて、いろいろなことが出来そうだな」と思ってもらうことが重要です。
例えば以下の例だと「マーケが出来るデザイナー」というキャッチフレーズがまず飛び込んできます。 そしてデザイナーの写真もあり、出来ることもかんたんな文章（概要）で伝えています。
ポイント
- 伝わるキャッチフレーズを入れる
- キャッチフレーズの説明文（リード）を簡潔に入れる
- 意味のある写真にする（本人であると一番良い）
ここはプロとしての売りが全面に出ていると良いでしょう。 まだ売りが無い方も弱気になる必要はありません。将来自分はここを売りにしていく！ということを書けば良いです。言い続けてやり続けていくうちに本物になってくるものです。
ここは勇気を持って宣言するつもりでキャッチや概要部分を作りましょう。
実演：トップセクションを変更してみる
実習では下記デザインにポートフォリオサイトを変更する方法をご紹介します。
実習で使用しているWEBページ/画像一式をコース素材としてアップロードしています。(sozai.zip)
実習と一緒にサイトアレンジの練習してみて下さい。
1.トップセクションのデザインを考える
良い例でご紹介した３つのポイントを中心に、以下をを考えていきましょう。
- キャッチフレーズとリード
- 意味があるヒーロー画像
例えば、コーディングが得意(好き)であればそこをPRする。
WEBデザインのキャリアがあれば、信頼できるベテランだという事をPRする。
プロである自分が売り物になるような、画像とキャッチフレーズを入れましょう。
ご自身のポートフォリオは講座や実習で登場するテイストにする必要はありません。 クライアントに伝えたい、あなたの強みが生きるようなカラーリングや画像選定を行っていってください。
画像が無いときは？
トップに配置する画像はご自身の写真を使われるのが最も良いです。 イラストが得意な方であればイラストで表現するのも良いですね。
しかし、良い写真が無い・そこまで大きく顔を出したくない…という場合は https://unsplash.com/などのフリーフォトサイトから画像を探して使用してください。
写真選定のポイントは「意味のある」ものにするという事です。 ページを開いてすぐに、何のサイトか、あなたは何が出来る人なのかが伝わるものを選びましょう。
2.ポートフォリオのトップセクションと差し替える
デザインが出来たら、使用する画像を切り出してWebサイトで使えるようにしましょう。 画像の切り出しについてはレスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザインをご確認ください。
こちらは写真に黒（半透明）のレイヤーをかけることで、上のテキストを見やすくしています。 この状態で切り出しても良いのですが、調整しやすいようにcssを使ってこの効果を再現していきましょう。
まず、ヒーロー画像部分を使用したい画像のパスに変更します。
このままではキャッチフレーズの可読性が低いので、cssの“filterプロパティ”を使って画像を暗くしましょう。.heroにそのままfilterを適用してしまうと文字にも影響するので、疑似要素(::before)と組み合わせて使用します。
※ポートフォリオ課題で使った、半透明の背景色を設定した<div>を重ねる方法でも出来ます。
★ filterプロパティ
「filter」は、ぼかしや色変化などのグラフィック効果を要素に適用できるcssプロパティです。photoshopの調整機能のようにグラフィック効果を適用させることが出来ます。今回の場合は明度を調整するbrightnessを使っていますが、その他にセピア調の色彩にする“sepia”やモノクロ化する“grayscale”なども用意されています。
プロパティ値についての詳細はMDN-filterをご確認ください。
ところで、css filterを設定した関係で<h1>部分が消えてしまっていますよね。
キャッチフレーズ変更と合わせて、綺麗に表示されるようにブロック構成を直してみましょう。
【HTML】
【CSS】
設定したフィルターがかかってしまわないように、テキスト部分を「intro」クラスを持つdivで囲いました。cssファイルの方でz-indexを指定して、フィルターよりも前面に配置されるようにしています。
あとは 問い合わせてみる、というリンクの設置 ナビゲーションのロゴ/サイト名部分の変更 ですね。
まずは問い合わせリンクを「intro」クラスを持つdivの中に作ります。
↓
次にナビゲーション部分。 こちらは「１日15時間コードを書いています」をH1見出し＝ページを総括するタイトルとして設定してしまうと違和感があるので、ロゴ/サイト名をH1に変更してみました。
これでトップセクションの変更は完了です。
課題：トップセクションを作成しましょう
ここからの課題について
このレッスン以降、ポートフォリオサイトの雛形を、あなただけのオリジナルデザインに変更していただく箇所（課題）があります。
WordPress化している方も、まずはHTMLファイルの方で変更してください。 上書きしてしまうと復元できないので、別ファイルを作成して変更作業を行いましょう。
【方法】
- 「my-portfoilo」など名前を変えてファルダごとコピーしたものを使う
- 同じフォルダ内でhtml,cssファイルのバックアップを作る
どちらの方法でも構いません。
今回の課題：トップセクションの作成
レッスンで紹介したポイントを踏まえて、IllustratorやPhotoshopを使ってトップセクションを作成してください。 デザインが完成したら、自分のポートフォリオのトップセクションと差し替えましょう。
ポイントは伝わるキャッチフレーズ、説明文には自分の強みを入れること。写真はなるべく良い写真を使ってください。
- 伝わるキャッチフレーズ
- キャッチフレーズの説明文
- 意味のある写真にする