こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
ワイヤーフレームから作成したものがデザインとして完成形ができました。
ここからは実際にデザインしたものをサイトに適用していきます。
多くの場合、私が受け持つ作業はここからです。慣れた作業ではありますが、気を抜かずに実施します。
※この記事は前回の「Webサイトのデザインから実装までやってみた-ワイヤーフレームとデザイン、コーディング編-」続きです。
「いちばんよくわかるWebデザインの基本」を参考に進めています。
WordPressサイトに適用する
本エンジニア婦人ノートはWordPressを使用しています。
なので、WordPressテーマを編集していきます（本サイトのテーマは自作「Nao Light」を使用しています）。
WordPressデザイン適用（開発環境）
詳細はテーマの構造によるので、ざっくりと書いておきます。
※デザイン適用作業は開発環境（LAMP）で行いました。LAMP開発環境の作り方シリーズ記事はこちらです。
1 Hyper-Vで仮想マシンを作ろう
2-0 事前準備をしよう
2-1 Apacheを入れよう
2-2 PHPを入れよう
2-3 MariaDBとphpMyAdminを入れよう
3 Laravelをインストールしよう
4 Xdebugを設定しよう
デバッグはVSCodeのリモートで行っています。
VSCodeを使おう！-仮想マシン×RemoteDevelopment×PHP-
以下、やった内容の一部です。
- style.cssの更新
- トップページ（front-page.php）の変更
- 投稿ページ（post.php）の変更
- サイドバー（sidebar.php）の変更
- 固定ページの変更（page.php）
- 各固定テンプレートページの変更
- カスタム投稿名の変更（SQLによるupdate）
- カテゴリ再振り分け
- エンジニア婦人ノート（技術系）と、婦人ノート（その他）の見せ方（ヘッダ、サイト説明文など）の出力方法を変更
作業内容の把握はGitHubにあるIssues、課題管理機能を使いました。すべての作業を細かく書き出し、一つずつ作業していきました。作業しているうちに必要な作業が発生した場合、それも起票して実行します。
WordPressデザイン適用（本番環境）
開発環境で確認して問題なければ、本番環境に適用します。
- GitHubからソースをダウンロード&適用
- カスタム投稿名の変更（SQLによるupdate）
- カテゴリ再振り分け
- パーマリンクの再設定
が主な作業となりました。
その後、動作確認をして完了です。
まとめ
書くと随分さらっとしていますが、開発環境適用作業は約12時間、本番環境適用作業は約4時間かかっています。
ワイヤーフレームから含めると…特別かかった時間を測定していませんでしたが、40時間はありそうです。一つの物を作るというのは時間がかかるものですね。
WordPressテーマへの落とし込み作業は通常よくやる作業なのでそこまで苦労しませんでした。
この適用作業で一番難しかったのは「テーマ内で1つのサイトを2つの別サイトのように見せる」ことです。
条件が複雑になる場合があり、一部はちゃんと分けて出ているけれど、一部が正常に出ていない、などの問題が発生したことも…。特に見た目には見えないmetaタグ周りで発生しました（Twitterカードの説明文が婦人ノートの内容なのにエンジニア婦人ノートの内容で出ていた、など）。
デザインからやってみて、デザインは感覚的に作っているばかりではなく、実はかなり理論的だと身をもって知ることができました。特に色の使い方、かなり理論的です。（素人が作ると何かとカラフルになりやすいですね）
そして最後は、「やはり見た目は大事」。いくらプログラムが優れていてもその見せ方がよくなければ目につかないものです。
本記事で「Webサイトのデザインから実装までやってみた」シリーズは終了となります。
