この記事は、【前編】からの続きとなります。
次に制作作業です。ここからはシステム屋がデザインを頑張ってみる話になります。
ワイヤーフレームの作成
「写真をストックするサイト」として漠然と制作することになりましたが、個人的に『Adobe XD』（サイトのモック制作に特化したツール）というツールの基本仕様を押さえておきたかったので、今回は設計の段階から利用してみました。
このソフトはコーディングする前に、サイトのおおまかな要素を作図し、お客様にサイトイメージの提案できる便利なツールで、お絵かき感覚でサイト内の要素を描画することができます。
一通り使ってみてみたところ、さすがにそのままソースコードに落とし込むのは難しいと感じましたが、積み木のような感覚でサイトのワイヤーを組んで「JSの動きまで盛り込んだ全体像」まで形作るのには、役立ちました。
早速、PC版のトップページのイメージからワイヤーを作りはじめて、その後はSP版のレスポンシブイメージを書き出します。
「Adobe XD」で製図した、当サイトの最初のモックアップ
・・・・。
・・・はい、このサイトを見ると解る通り、原型を留めておりません・・・。
流石に制作作業は初心者なので、コーディングを進めていく間に、あれやこれや修正したい箇所が増えてしまい、結果として基本路線もぶっ飛ばして「自分の表現したい色味」に変更してしまいました・・・。
やはり、私は根っからの厨二病っぽいデザインが好きなわけです・・・。
なるべくホワイト系にしようとしたのですが、本能に逆らえずダーク系と幾何学模様が好きなので、Photoshopやイラストレーターで夢中に作図しておりました。
CSS修正を重ねて完成したサイトの構図(現在のデザイン)
サイトカラーの原型は崩れ去りましたが、Adobe XDではレスポンシブの設計もしやすかったので、「PC版」と「SP版」のページ構成が製図できていたため
コーディングの段階では、ある程度のゴールが頭に入った状態でCSSをコーディングできたので、AdobeXDの恩恵はあったかと思います。
グローバルメニューの動きなどもJSアニメーション（イージング、デュレーション、トランスレーション）を意識した設計ができたことも、このツールの存在は大きかったです。
なお、PHPの関数作成やJS処理は仕事で普段使いしているため、分岐処理などを追加実装し、対応していきました。
テーマの実装
さて、ワイヤーフレームが決まりましたら、実際にコーディングに入ります。
個人的には、サーバー構築は仕事と同じ内容なので特に変わりばえはありませんでしたが、、コーディング及びCSS設計は一番新鮮で楽しい作業でした。
今回は、１からWordpressのテーマを自作しています。（厳密にはデザイン作業のみ１から制作）。
10年前に公開していたブログでは「子テーマ化」という仕組みで「既存のプロが作ったテーマを改造」しておりましたが
この手法では「既存のテーマ」を把握したうえで、自分のデザインに変換する形になってしまうので
- 他人のデザインしたCSSやPHPの文化を理解する時間が必要
- 他人のデザインしたPHP設計/テーマ構成に縛られる
- 自分色を出すには他人のデザインした構造を破壊しながら進めるしかない
といった具合に、往復的な時間がかかり、工数が長期化してしまいます。
そこで『子テーマ』は辞めて、「最小限のPHP」と「デザイン要素ゼロ（リセットCSSのみ）」で構成されるUNDERSCORESという「スターターテーマ」にカテゴライズされるものを採用しました。
このツールを、サイトに適用した図がこちら。
このようにデザイン要素が全くない白ページになるので、すべて自分でデザイン制作する必要がある反面、制作上の制約が一切ない—–という、とても理想的な環境が用意できるのです。
またPHPの関数などもWordpressの標準のままなので、余計なカスタマイズが入っていません。
必要であれば、自分でどんどん追加実装ができます。
上記の工程で、AdobeXDで作成したイメージに近づけるよう、グリッドを意識したレイアウト設定をCSSに書き込んで行き、300回ほど編集を重ねて、現在のサイトのデザインに仕上がりました。
全体的にHTML（PHP)及びJavascript実装は1割の作業で、ほとんどはCSSのデザイン実装に時間を割いています。
グローバルナビの設計(左利きの苦悩)
AdobeXDで設計したワイヤーに対する、【最初の破壊ポイント】になります。
モックの段階では、スマホサイトでよく見かける【ハンバーガーメニュー】を展開する処理としてJS/CSSに着手しようとしましたが
「ハンバーガーメニュー」は画面右上配置されることが一般的だと思います。
しかしながら、左利きの私としては近年肥大化するスマートフォンの画面サイズに対して、タップ領域が遠く、【指が届かない】－－－といった億劫に感じてしまう悩みがありました。
そこで、せっかく１からサイト構築できるので、今回はYahooニュースや電車案内アプリで見かけるような「ボトムメニュー」をWebページで表現することにしました。
左：ハンバーガーメニュー/右：ボトムナビゲーターと左利き親指の稼働限界エリア
参考材料：Yahooアプリ
これにより、左利きでもタップしやすくなったのですが、CSS設定で苦戦したこととしては
iphoneX系になってから「画面のセーフエリア」の定義が変更されており、ボトムメニューが半分隠れたり反応しなくなる不具合がでました。
このあたりは、CSSでsave-areaとして設定するプロパティーが用意されておりますので、位置調整処理に加算させることで不具合を軽減することができました。
実はまだ、ボディー要素を操作した後に、「一度タップ」しないとアクティブにならない課題が残っておりますが
ひとまず「ハンバーガーメニュー」以外の提供方法を実現できた形となります。
他にも色々とハマった個所はあるのですがPC端末およびスマートフォンでプレビューしながら
CSSでメディアクエリを使って
p.hoge {
font-size: 1.2rem; //PC版のスタイル設定
}
@media screen and (max-width: 920px){
p.hoge {
font-size: 0.9rem; //スマートフォン版のスタイル設定
}
}- 「端末共通スタイル」
- 「PC用のスタイル
- 「スマホ版専用のスタイル」←必要に応じて
それぞれを行き来しながら構築しました。
パーツの製造
画像を投稿するサイトなので、なるべくサイト本体は軽量なつくりにするため、極力CSSでデザインをしておりました。
グローバルメニューのアイコンにはFontawesomeという一般公開されたアイコンを利用しております。
それ以外のパーツについては、今回はAdobe IllustratorとAdobe Photoshopで自作してみました。
イラレとフォトショで制作したロゴ群です。
- 前者（サイトロゴ）：「付け合わせ」という名の通り、お皿の上で提示したもの。「風景写真」と「料理写真」が好きなのでそれぞれのモチーフをベジェ曲線で描画したものとなります。
- 後者（トップスクロールボタン）：幾何学的な模様が好きなので、図形を適当に重ね合わせて、シェイプ形成ツールで切り抜いたものです。
ソース管理と修正ポイントについて
まずWordpressのコアファイルはバージョン更新時にリセットされるので基本的に改造せず、functions.phpおよびテーマファイルのPHPを改造して、コアファイルの外側から変更を施しています。
また、PHP/Javascript/CSSの変更を重ねていると、たまに不具合で動作がおかしくなることがあります。
基本的にはデバッグして調整するだけなのですが、全体の修正箇所を俯瞰でみれるようにしておくと今後別件で再利用できます。
そこで、Githubのプライベートリポジトリを間借りしました。
これにより、ローカルPC保存では、予期せぬ障害でソースコードを失うリスクもあるので、クラウド上にバックアップ及び差分管理しています。
Githubに記録された当サイトの修正（活動）ログ
ヒストリーバックしやすい環境は非常に安心ですね！
かなりざっくりした内容ですが、以上の要点を抑えながら、このサイトを構築した次第です。
