【Photoshop×CSS】よくあるヘッダー５選 〜実装編 Part3〜
「よくあるヘッダー５選 〜デザイン編〜」でご紹介したホームページのヘッダーデザイン５パターンをphotoshop×CSSで実装していきます。
今回は「絵＋文字」のメニューがテーマです。メニューバーに文字の他にイラストやアイコンを使ったデザインを実装します（内容としてはphotoshop多めです）。また、トップ画像が長方形以外のパターンを学びます。写真の輪郭を加工しておしゃれにしてみましょう！
まずはじめはこちら。
メイン画像が決まったら、Photoshopの「曲線ペンツール」を使って切り抜きをしています。まずはこの方法をご紹介します。
①photoshopで画像を開きます。最初、開いた画像は「背景」に設定されていますので、この鍵マークをクリックして「レイヤー」とします。
②photpshopのツールバー（画面左端の列）から、曲線ペンツールを選択します。
③切り抜きたい輪郭を大まかに描きます。ざっくりで大丈夫です。今回曲線にしたいのは画像の上部のみなので、曲線部を描き終わったら画像の外にはみ出す形でアンカーポイントを打ち、始点と終点をくっつけます。
④図形をキレイに整えます。アンカーポイントをクリックすると「選択」された状態になりますので、このまま移動させたい方向にドラッグします。アンカーポイントを移動すると両サイドの曲線もついてきます。各ポイントを少しずつ動かして曲線部を整えていき、完成させます。
⑤「曲線ペンツール」を選択した状態で「マスク」をクリックすると、描いた輪郭で画像がマスクされます。
⑥この状態で「書き出し」を行うと、切り抜かれた画像が得られます。
なお、JPEGを選択すると、切り抜いた余白部分が「白」になります（JPEGは透明が表示できません）。余白部分を透明にしたい場合はPNGを選択しましょう。
では、トップ画像ができたところで、文字をコーディングしていきましょう。
HTML
<body>
<!-- ロゴ＆所在地 -->
<div class="first-view">
<div class="firstview-left">
<img src="./images/logo-1.png" alt="ロゴ" class="logo">
</div>
<div class="firstview-right">
<p>○○県□□市△町1-1-1<br>
TEL xxxx-xx-xxxx</p>
</div>
</div>
<!-- イラスト付きメニュー -->
<div class="menu">
<div class="menu-box">
<a href="#"><img src="./images/menu-1.png" alt="いちご"><br>いちご</a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu-2.png" alt="桃"><br>桃</a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu-3.png" alt="レモン"><br>レモン</a>
</div>
<div class="menu-box">
<a href="#"><img src="./images/menu-4.png" alt="アボカド"><br>アボカド</a>
</div>
</div>
<!-- TOP画像 -->
<div class="image top-image">
<img src="./images/firstview-img.png" alt="農園イメージ">
</div>
</body>
※今回は練習なので、メニューのリンク先は便宜的に”#”としていますが、実際のホームページでは各ページへのリンクが入ります。
CSSについて特に目新しい内容なありませんので、ポイントを絞って解説します。
◆ロゴ&所在地
ロゴと住所が横並びになっていますので、フレックスボックスを使います。space-betweenを加えることで、要素を両端に揃えることができます。
.first-view {
display: flex;
justify-content: space-between;
margin-right: 50px;
}
◆イラスト付きメニュー
果物のイラスト付きメニューです。こちらも親要素（class=menu）にフレックスボックスを指定して、子要素を横並びにします。そして、positionを用いて配置を調整します。個々のメニュー（いちご、桃、…）に対しても、子要素に指定したクラス(class=menu-box)にスタイル
を追加して間隔や文字配置などを調整します。
/* メニュー全体 （親要素）*/
.menu {
display: flex;
position: absolute;
top: 200px;
right: 20px;
}
/* 個々のメニュー（子要素）*/
.menu-box {
margin-left: 60px;
line-height: 2rem;
text-align: center;
}
◆TOP画像
TOP画像を配置します。positionを指定して、望みの位置に画像を移動します。
.top-image {
position: relative;
top: -100px;
}この他、各要素のクラスに細かいスタイルを指定して（画像にwidth, heightを指定したり、文字色やフォントスタイルなどを指定します）、完成です。
…では、動作確認！リンクが動作するか、カーソルを合わせてみましょう。
あれ？動作しませんね。なぜでしょう。
「検証ツール」で確かめてみると…TOP画像の余白部分が被さっています！PNG指定で余白を透明にしても、「何も無い」わけではないのです。透明な部分として、そこに画像があるのですね。
メニューにpositionとz-indexを追加して、重なった画像の上側にくるように指定します。
/* 個々のメニュー（子要素）*/
.menu-box {
margin-left: 60px;
line-height: 2rem;
text-align: center;
position: relative; /* 追加*/
z-index: 1; /* 追加*/
}
これで、リンクが動作するようになりましたね！！
「絵＋文字」のメニュー 〜応用編〜
今度は下記のようなふにゃふにゃの形に画像をくり抜いていきます。ほんわかおしゃれな雰囲気のホームページにありがちな「ふにゃふにゃ図形」をマスターしましょう！
まず、「曲線ペンツール」でざっくりと輪郭を描きます（アンカーポイントの視点と終点はくっつけましょう）。次に、移動させたいアンカーポイントを選択＆ドラッグします。
アンカーポイントを追加＆削除＆移動させながら調整し、図形を完成させていきます。
※お手本となる図形がある場合は、お手本をくり抜きたい画像の下に配置し、画像の不透明度を下げて、お手本が透けて見えるようにします。この状態で、お手本のラインに沿って上記操作を行い、最後に画像の不透明度を戻すと良いでしょう。
HTML
<body>
<!-- ロゴ -->
<div class="first-view">
<div class="firstview-left">
<img src="./images/logo-1.png" alt="ロゴ" class="logo">
</div>
<!-- メニュー -->
<div class="firstview-right">
<div class="menu">
<div class="menu-box"><img src="./images/menu-1.png" alt="" class="menu-image"><span>遊ぶ</span></div>
<div class="menu-box"><img src="./images/menu-2.png" alt="" class="menu-image"><span>食べる</span></div>
<div class="menu-box"><img src="./images/menu-3.png" alt="" class="menu-image"><span>ふれあう</span></div>
<div class="menu-box"><img src="./images/menu-4.png" alt="" class="menu-image"><span>ショッピング</span></div>
</div>
</div>
</div>
<!-- TOP画像 -->
<div class="image top-image">
<img src="./images/firstview-img.png" alt="">
</div>
</body>
CSSは特筆することはありませんので、コードは省略します。
ロゴとメニューをフレックスボックスで横並びにします。さらに、メニュー項目の親要素（class=menu）にもdisplay: flex;を指定して、メニューを横並びにします。
あとは、文字要素にスタイルを指定して色や間隔を整えたり、各要素にmarginやpaddingを追加して全体のバランスを整えます
「絵＋文字」のメニュー 〜応用編２〜
では、こちらはいかがでしょう？
画像は図形でくり抜きます。左サイドを曲線にしたいので、今回は楕円形を使います。（画像からはみ出した部分は元の直線が残ります。）
くり抜きたい図形を作ったら、レイヤーの順番を「画像が上、図形が下」にします。そして、画像と図形の間で「optionキー」を押しながらクリックします。
画像が図形でくり抜かれます。
次は、メニューの部分を作っていきます。
photoshopで作る場合は、図形の「円」の上に文字とアイコン（アイコン素材サイトからダウンロード）を配置し、グループ化して書き出しをします。
XDで作る場合、アイコンはプラグインから取得できます。「Icon 4 Design」というプラグインを使い、XD内でアイコンの検索からダウンロードまでできます。取得したアイコンと「円」の図形そして文字を組み合わせることで各メニューを完成させていきます。
そして、各々を画像として「書き出し」ます。
コーディングは省略します。
メニューは「縦書きリストの縦ならべ」です。これは、【Photoshop×CSS】よくあるヘッダー５選 〜実装編 Part2〜で解説しておりますので、こちらをご参照ください。
各パーツは、positionなどを使って所定の位置に配置していきます。
いかがでしたか？
最近よく見かけるデザイン、「あれはどうやって実装するんだろう？」という疑問が解消されたり、今回の練習を通してあなたのデザイン＆実装の引出しが増えましたら幸いです。
注意
今回例示したホームページデザインは、この記事のために作成したものであり、実在の団体のホームページはありません。また、今回使用した画像は「pixabay」「PhotoAC」「Adobe stock」から、ロゴは「Canva」から取得したものです。どれも基本的に商用利用可能な素材を扱っています。
ただし、ご自身でご利用の際は、各素材サイトの規約をよく確認しましょう。商用利用の範囲はサイトごとに細かく決まっております。写真やロゴそのものの販売はNGであったり、ビジネスでの使用にはそれぞれの規約に基づいたアクション（料金の支払ってデザインを買い取る、クレジットの表記…）が必要になりますのでご注意ください。