こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
先日、デザインの本を読みました。
私はHTML、CSS、PHP、javascript（jQuery）を扱うウェブ屋さんですが、Webデザインだけはしたことがありませんでした。単純にその機会がなかったからです。
自分のサイトの見た目を度々変えてきましたが、それは職業的にデザインというにはやり方としてどうなんだろう。という点が大きくありました。
ウェブデザインってどうやってやるんだろう？
この疑問を元に本を読み、そして理解したことを実践して、アウトプットしました（アウトプットは言うまでもなく、2020年9月1日の本サイトリニューアルです）。
要望ヒアリングをする
今回は依頼主＝作業主です。このサイトの目的、改修のゴールはどこなのか、自問自答していきます。
クライアント主要製品
このサイトを作る依頼主が扱っている主要製品を挙げてみます。
また、依頼主は個人事業主です。
- プログラム開発
- 技術情報のブログ
- WordPressテーマ
サービスの特徴
このサイトで提供しているサービスの特徴です。以下のようなものが挙げられました。
- Linuxサーバーの開発環境構築
- フレームワーク使用方法
- 経験上から出る、プログラムで困ったときの対処方法
変更前はこれに雑多な日常（主に家事と育児）の内容が入り込んでいました。
ターゲット
- 同じプログラムを扱う人
- 同業者、開発人員を探している人
- 同じ子育て中の父母
3つ目のみ、プログラムとは無関係のようです。
サイトの基本情報
- さくらのレンタルサーバー スタンダード
- WordPress
- 依頼主が記事の更新、アップデート、テーマの適用などを行う
依頼主がすべてを行っています。
Webサイトの目的
- 開発中に困ったとき、誰かに情報を提示できるようにニッチなものでも掲載している
- 自分のできることの宣伝
- 広告収入、アフィリエイト収入が発生すると尚嬉しい（アクセス数アップが課題）
この3点が挙げられました。（アクセス数アップはともかくとして）個人事業主なので自分ができることの宣伝に使いたいとも思っているようです。
また、当初は「自分が出先にいるときに自分のノートをオンラインで探せたら便利だから」「試験的に云々するときは自分のサイトでやると何かと都合がいいから」とサイトの目的自体を深く考えていなかったこともわかりました。
Webサイトに必要なコンテンツ
基本的なサイトの状態は既にできているため、今回は「プロフィールページをどうするか」「お問い合わせは」などは現存するものに追従します。
コーポレートカラー
特に決めてはいないようでしたが、オレンジ色が好みのようで、それをメインに構築しているようでした。
また、ヘッダ画像を作成依頼したときに、オレンジと茶色をメインに作成して頂いた経緯がありました。
ヒアリングの結果
ヒアリング後、提案と話し合いを行い、以下のように進めていくことになりました。
ターゲットによって見せ方を変える
変更前は「技術系の情報」「家事・育児の情報」と全く別のジャンルが混在していました。新着記事一覧でも両方が一緒に現れる状態です。
技術系の情報はターゲットの
- 同じプログラムを扱う人
- 同業者、開発人員を探している人
に該当しますが、
- 同じ子育て中の父母
にはほとんど該当しないでしょう。そのため、
「メインコンテンツを技術系の情報として、家事・育児の情報をサブコンテンツ扱いとして別サイトのように見せること」
としました。
例えば技術系の記事では新着情報に技術系の記事のみを掲載、カテゴリ一覧からも「家事・育児」関連のカテゴリは非表示とします。
「PHP」カテゴリは表示しますが、「料理レシピ」カテゴリは表示しない、などです。
合わせてヘッダとフッタも表示を変えることで、検索結果などから記事を閲覧しに来た閲覧者に違和感を持たせないようにすることになりました。
閲覧者からしたら「お料理レシピを見に来たのに、PHPって何！？」となっていたかもしれません。
プロフィールや料金表、問い合わせ、検索結果などはサイトの共通項として全体の結果を表示しますが、個別のジャンルに分かれるページはそれぞれのコンテンツに適した形で表示することになりました。
マルチサイト化しない理由
また、「別サイトのように見せる」のは当初マルチサイト化やWordPressをもう一つ導入する案もありましたが、
「WordPressをマルチサイト化することで起きるかもしれない問題を除きたいし、WordPressをもう1つ導入してまでやると更新管理が地味に大変。また、そこまでして家事・育児の内容を別コンテンツとすることもない」
と依頼主が判断されたため、今回は「現存のWordPressテーマ内のみで対応する」こととしました。
使用する色を減らす
オレンジ、茶色、緑、と使用している色の数が多かったので使用する色の数を減らすことにしました。
ヘッダ画像と調和を持たせるため、オレンジ系統を主軸に、茶色、アクセントカラーに青を採用することにしました。
カテゴリの再振り分け
現状のカテゴリ分けが大雑把であるため、より記事の特性を示すものとしてカテゴリを再度振り分けることになりました。
まとめ
サイトを構築するときに
- どういったサイトの見た目にしたいのか
- 誰のための、誰に見てもらうサイトなのか
を主に検討しました。メイン読者は
- 同じプログラムを扱う人
- 同業者、開発人員を探している人
サブ読者は
- 同じ子育て中の父母
と位置付けました。読者によって見た目を変更します。
