こんにちは。マイです。
先日このブログサイトのWordPress実装時に立ち止まったことや反省点を綴ってきました。
今回はデザイン面で考えたことを書いていきたいと思います。
ちなみに、ブログサイトは自分の好みを表現したかったので、マーケティングやSEOはほぼ無視しています。ゆるゆる企画です。
参考サイト集め
海外のギャラリーサイトで見つけたWebサイトを参考にしました。
国内の有名ギャラリーサイトだとブログサイトのデザインをフィルタリングできず調べにくかったんですよね。（ブログありのサイトもあるにはありましたが…）
WordPressだと良質な無料テーマもあるし、今はnoteもあるので意外と需要ないのかな？とは感じました。
デザインの方向性
ブログサイトということで、メインは文章です。
そのため、なるべく文章が見やすいように暖色かつ色相の異なる色を使いすぎない配色を心がけました。
こんな感じでアクセントカラーであるリンクホバーやマスクの紫色は、目立ちすぎないようにしています。
制作ツールと進め方
ワイヤーフレームとデザインカンプはFigmaを使いました。あとは少しだけPhotoshopを。
オートレイアウトの使用に挑戦したかったのですが、どうコーディングしていくかが明確じゃないと作りにくいと感じたので、オートレイアウト未使用で作成しました。
完成したデザインカンプはまとめて画像で出力して、ブロックごとに囲ったりよく使うフォントサイズやブロック幅をメモしたりしています。
作業するPCではなくタブレットのペイントソフトを使ってメモしているので、ウィンドウの切り替えも減って作業しやすいです。（Figmaをめいっぱい広げて作業できるのです。）
反省点：デザインカンプ時点での設計の甘さ
デザインカンプ作成前に、ワイヤーフレームとサイトマップを作り、サイトマップにはスラッグやページ名を決めて課題提出していました。
なるべくサイトマップに沿ってページ構成を進める予定でしたが、ここで問題が。
カリキュラムで学んだだけだとWord Pressのテンプレート階層の構造を実践で活かすレベルまでは把握できていないことに気がつきました。
実際作ってみないと分からない部分もあるとはいえ、もう少し事前にテンプレート階層への理解を深めておくべきだと反省しました。
よく言われることですが、実装レベルのテキストをワイヤーフレーム時に用意しておくと、行間の設定や文字サイズなどの指定が楽になるように思います。
おわりに
Figmaを使ってデザインカンプを作成したこと、WordPressでの実装など、初めての経験ができてとても充実した制作でした。
初めてなので改善点もたくさん発見できたので、次回の制作に生かしていきたいです。
ここまで読んでいただきありがとうございました。
それでは、また。
