WordPress #6 | 記事ページの画面デザイン

WordPress開発6日目。
昨日、フロントページの実装が完了したので、次は個別の記事の画面を作っていく。今回は共通のものを1つ作るのではなくて、日報と制作日誌で個別のデザインを用意。

今回のブログの制作テーマにすべての画面をFigmaで作って、制作ノウハウを増やすという目標があるので、それに従って作っていく。さすがにまだPhotoshopを使って作るよりも早く作れるという感触は無いが、だんだんとFigmaで制作する時の考え方が分かってきた。

最も肝心なのは「制約」という考え方で、デザイン上の配置とその親オブジェクトに対して、どのようなルールで配置されるのかを設定することで、デザイン画面上である程度のレスポンシブレイアウトの確認を行う事が出来る。
少し調整してみたところ、1200px〜1920pxに対応するデザインルールを作成出来たが、ひとつひとつの要素を画面サイズの可変によってどう動作するかを設定するようなものなので、画面デザインの段階である程度コーディングの事を考えておく必要があるだろう。
このあたりがPhotoshopで作成する時と考え方が異なる点だ。

コンポーネントの機能も使ってみたが、こちらは今のところよく分からない。同じものを複数配置される際に使うというぐらいの事は分かるんだが、コンポーネント内で変えられる部分と変えられない部分がどう定義されているのかがすごく分かりづらい。

1日で日報と制作日誌の記事ページ、両方をデザインすることは出来た。
サイドバーの表示に少しアイディアを加える。実装が楽しみだ。