dedede 
金沢のシェアハウスのホームページ制作をリアルタイムで発信中
僕の地元である石川県金沢市に2021年5月にシェアハウス G-eight HOUSE がオープンします！
無事クラウドファンディング達成できたそうです！！ご協力ありがとうございました^^
（※全回はアーカイブからご覧いただけます）
#6 デザイン下層ページを作ろう
前回に引き続き、下層ページを作っていきましょう。(下層ページについては第２回 のサイトマップセクションを参照してください）
今回作ったページはfigma上で見れるようにしておきましたので興味のある方はこちらをどうぞ。
以下の３ページのデザインをしました。
- 私たちについて（初回ではコンセプトページと記載していましたが都合上名前変更)
- ニュースアーカイブ
- HOUSE（シェアハウスの内装、外観)
(案件にもよりますが、)下層ページでは、トップページに書いてあるセクションの内容を、詳しく記載する感じです。そのため、トップがある程度しっかりできていれば、それほど時間はかかりません。今回は下層ページのデザインでかけた時間は３ページで４時間程度でした。
(なお、”HOUSE”ページに写真がないのは、まだ実際のシェアハウスが建築中で内装ができておらず、写真が撮れないためです。本来はこの段階で写真もfixしないとダメなので気をつけましょう！)
例として”私たちについて“のページのみご紹介
これで、一通りデザインの工程は終わりです！
ただ実際にweb制作されている方からすると、”これはなんだ！？未完成だろ！”という感じだと思います。
主に以下の点でお叱りを受けると思います。
- セクション、ブロック間の空白が適当すぎる
- 記事の表示方法をもっとしっかり決めなさい
- SNSアイコン色どうするの？
- 写真サイズ適当すぎない？
などなど、他にもたくさんツッコミどごろ満載です。もちろんこの辺りもしっかり決めるべきなのですが、今回上記の点を厳密にしていないのは、今後の実装上あまり気にする必要がないからなのです。主に以下の観点から、上記の箇所に時間を割いてないのです。
- 空白などの余白が決定している、有料テーマの使用
- ブロックエディターを使ったローコードでの実装
- デザイナー＝コーダー(実装者)＝僕 なので設計図を他人に共有する必要なし。
つまり、
①デザインの適当な部分は、実装時に自動で補完される
②全サイト制作工程を僕が担当する
ためデザインの厳密性のところに工数を割いていないのです。
逆に言えば、デザインだけ担当し実装を外注する場合はほぼ必ず、細かいところまで厳密に決める必要があるので気をつけましょう！
それではここから実装に入っていきますがその前に簡単な説明をして本回は終わります。
デザインを実装（コーディング）するための２手段
次回からデザインを実装に落とし込む作業ですが、主にワードプレスを使った実装の場合２通りに分類されます。
①既存テーマの使用(他人が編集しやすいように作ったもの）
②テーマ自体の作成
の２種類での実装があります。
（※ワードプレスには ”テーマ” といういわゆる”型”が存在するのですがこのテーマを再利用するか、一から作るかに分けられます。）
それぞれの違いは以下になります。
| 既存テーマの使用 | テーマ作成 | |
|---|---|---|
| 制作難易度 | ◯（簡単) | ×(難しい) |
| 制作時間 | ◯（短め） | ×（長い) |
| カスタマイズ性 | △ | ◯ |
| ページ読み込み速度 | △ | ◯ |
| 制作後の編集 | ◯ | ×（コーディングスキル必須） |
一方でクリエイティブなデザインや、数ピクセル単位で拘っているようなデザインを実現するのは難しい。
今回は、制作当初の時点で既存有料テーマ(snow monkey）を使うことを決めていました。理由は制作後に初心者でも編集しやすいからです。基本的にコードを書かずにブロックエディターという機能を使うだけで制作ができてしまいます。
本案件は納品後にweb制作に少し精通されている担当者様が運用されていく予定のため、制作後の編集の柔軟性があることが重要だと考えて既存テーマを使うことにしていました。
※制作会社などはテーマ作成をするのが一般的ですが、現在フリーランス界隈では既存テーマでの実装が主流のように思われます。
まとめ
本回はデザインの下層ページ制作と、実装に入る前の背景説明をしました。
デザインの適当な箇所について意図も説明しましたが、もちろん時間があるのであれば細かいところまで詰めるのが最も良い のでその辺りは誤解しないようにお願いいたします。
意図がない手抜きは、ただの不誠実な手抜き作業＝仕事を適当にする人 になるので気をつけてくださいね。
