ホームページ制作記録①　ヘッダー制作

この度、PCサポートLSPのホームページを自分で制作することにしました！
WordPress + Cocoonをベースに、できるだけシンプルで見やすく、PCに詳しくない方でも迷わず快適に利用できるホームページを目指して作っていきます。

せっかくなので、完成までの過程も制作記録として残していこうと思います。
なお、制作記録内では作ったコードを公開する予定はありませんので、コードをコピペしたい！！みたいな方はブラウザバックでお願いします|дﾟ)…

第1回の今回は、サイトの顔になる「ヘッダー」と「メニュー」周りから手を入れていきます。

まずはWordPress + Cocoonで制作を開始

ベースにはWordPressと無料テーマ「Cocoon」を使用しています。

ただし、Cocoonの見た目をそのまま使うのではなく、子テーマ側でCSSやJavaScript、PHPを調整しながら理想としているイメージのホームページを作り込んでいきます。

有料テーマを使用すれば、手っ取り早く格好よくオシャレなホームページを作ることもできます。
ただ、理想と違う部分は結局自分で調整することになるので、それなら無料で自由度が高く、ネット上にも情報が豊富なCocoonをベースにしようと考えました。

早速、Cocoonを読み込ませただけの初期状態がコチラ…

だ、ださい…（震）
これから希望を持ってオシャレなホームページを作成しようとする者を、一瞬だけ絶望に突き落とすほどのシンプルさ(笑)
阿部寛のホームページに負けず劣らずなインターネット黎明期を思わせる雰囲気があります(笑)

これはCocoonが悪いわけではなく、まだ何も設定していないのでこんな見た目をしているだけで、このシンプルさ+自由度の高さがCocoonの人気の理由のひとつと、個人的には思っております。

まずはホームページ全体の方向性を決める

色んなことを闇雲に作り込んでいく前に、
ホームページをどんな方向性で作っていくかを考えていきます。

当ホームページは私が提供しているサービスを紹介するものなので、以下のような方向性を定めました。

このあたりのコンセプトを前提に、私は昭和の人間なので…手書きメモ（震）でイメージを膨らませます。

ヘッダーを作り直す

最初に手を付けたのは、どのページでも表示されるヘッダー部分です。
いつでも目に付く部分が初期状態のまま進んでいないと、私のモチベーションが上がってこないので、私はいつもここから作成します(笑)

ロゴを配置

まずは私が雑に作った仮のロゴを配置していきます。
私はお絵描きやデザインは全くの専門外なので、ヘッダーのロゴに関しては今後デザイナーのお友達に制作依頼を投げる予定です(笑)
背景とのバランス等を調整しつつ、ちょうどいい感じにサイズ調整しました。

グローバルメニューを整理

メニュー項目は、4項目+検索ボタンだけのシンプルな構成にしました。
ここに関しては載せたい情報はいっぱいあるんですが…増やし過ぎると目的のページを探しにくくなるため、上部には大きな入口だけを設置しました。

サービス案内とブログはメガメニュー化

サービス案内とブログのメニューは、今後その下に複数のページがぶら下がる予定なので、通常の小さなプルダウンではなく横幅を使ったメガメニューを採用しました。
ここではCSSだけではなくJavaScriptも使い、マウス移動時の表示・切り替えなども調整しています。

検索はモーダルウィンドウに

サイト内検索も、標準の検索欄を常時表示するのではなく、虫眼鏡を押したときだけ開くモーダルウィンドウにしました。

検索は必要な人にとっては重要な機能ですが、常に大きなスペースを取る必要はありません。
そのため、普段はできるだけ画面をシンプルに保ちつつ、「何かを探したい」と思った時にはすぐに使える形を目指しています。

また、今後トップページやサイドバーにおすすめ記事やお知らせ、検索窓がズラッと並ぶような構成にはしたくないので、必要な機能を必要な時だけ表示する方向で渋谷……じゃなくてサイト全体を整えていく予定です。

現在はまだ作りかけの状態なので、検索バーしか表示されていませんが、ホームページの中身がもう少し固まってきたらモーダルウィンドウの中の表記も調整予定です。

今回の完成形

今回はヘッダー周辺を中心にPC表示を中心に作成し、こんな感じに仕上がりました！

まだまだ作ります！

ヘッダーだけでも思った以上に調整箇所がありましたが、だいぶそれっぽくなりました！
とはいえ、中身はまだまだ空っぽです(笑)

次回以降はフッターやモバイル表示、サービス案内、料金ページなども順番に作り込んでいきます。

完成までしばらく続く予定なので、興味がある方は暇つぶし程度に見てもらえればと思います。

では、最後まで読んでいただきありがとうございました！