Simple Journal – テーマのデザインと仕様を決める

早速WordPressテーマの実装(テンプレートファイルにコードを埋め込む作業)に入ってもいいのですが、
その前に今回作るテーマ「Simple Journal」のデザインと仕様をもう少しだけ明確にしておきたいと思います。

 

まずデザイン(レイアウトやスタイリング)については、Adobe Experience Design というデザインソフトを使ってイメージするところを描いてみました(以下を参照)。

XD

作成したのは、トップページと投稿ページのデザインを(スマホサイズ版とPCサイズ版の)それぞれ2パターンずつ。

 

またデザインを作成しながら、今回のテーマの仕様も以下に洗い出してみました。

テーマ「Simple Journal」の仕様

  • 2段階のレスポンシブWEBデザインに対応する
  • 投稿フォーマットは「標準」のみとする
  • 投稿ごとにコメント欄(コメントの一覧とコメント入力欄を表示する箇所)を設ける
  • ナビゲーションメニューに対応する(サイト名の下にカスタムメニューを表示)
  • エディタースタイルに対応する(公開時の見た目とほぼ同じスタイルを管理画面のHTMLエディターに適用する)
  • 検索には(現時点では)対応しない
  • カスタムヘッダーには(現時点では)対応しない
  • カスタム背景には(現時点では)対応しない
  • 投稿サムネイルには(現時点では)対応しない
  • サイドバーには(現時点では)対応しない
    ※ 従ってウィジェットの表示にも(現時点では)対応しない
  • テーマの国際化は(現時点では)対応しない

見た目も機能も、まずはひたすらシンプルなものにしようと思います。

 

次回はこのデザインをもとに、テーマのベースとなる HTML + CSS を作っていきます。