モックアップの作成

以前はWordPressのローカル環境構築について記事を書きました。

WorePressテーマをデザインしようという時に初めにモックアップを作成したのでそれについてお話しします。

 

サイトマップ

サイト作成の前にサイトの構造(サイトマップ)を決めておく必要があります。ただ今回はブログなので基本的な構造はあらかた決まっています。

次を用意することを決めて作業を進めました。

  • トップページ
  • アーカイブページ(カテゴリー、日付、検索結果)
  • 404ページ
  • 記事ページ
  • このブログについての情報
  • お問い合わせフォーム
  • プライバシーポリシー

 

デザイン作業の目的

私は設計・デザインはある目的に添って行われるべきだと考えています。なのでテーマを作る目的やコンセプトを前もって決めておくことは非常に重要だと思います。例えばこのブログの根本の目的は「日々学んだことや自分の考えを公開する機会、思考を整理する機会を作りたい」でした。そのためこのブログのテーマを作る際は余計な装飾作業で根本の目的が疎かにならないようなデザインを目指しました。「そもそも何でこれを作るのか、やるのか?」をよくよく考えてみていつでもそこに立ち返るというのは大事だと思います。目的が定まったらデザイン作業に入ります。

 

ワイヤーフレーム・モックアップ・プロトタイプとは

設計開発のスタート時に作成されるものとしてワイヤーフレーム・モックアップ・プロトタイプという言葉があります。それぞれどのようなものなのかを見てみます。結構意味にバラツキがある言葉もあると思います。なおこれらはコミュニケーションツールとしても用いられます。

 

ワイヤーフレーム

サイトの枠組み、骨格を描き出します。ここにこんな機能やボタンを配置してということを大まかに決めていきます。あまり細かいデザインを行いません。下はワイヤーフレームの例です。

 

モックアップ

静的なデザインをつめたものを指します。動的な動き(画面遷移やボタンを押した時の動きなど)は除きます。実際に色、フォントを決めたテキストや、必要な画像等を配置したものを作成します。このモックアップが最低限充実してから作る作業に取り掛かった方がよいのではないかと私は考えています。このブログの作成においては、例えば次のようなモックアップを作成したりしました。トップページです。

 

プロトタイプ

動的な動きも含めたモックアップ、試作品です。誰かに触って評価してもらう必要があったりする場合などに作成されます。クライアントワークでは作成が必要になるかもしれません。

 

モックアップ作成の重要性

私はモックアップ作成する際の設計の精度が開発の進捗のスピードに大きく影響すると考えています。というのも実際このブログのプログラム作成にとりかかる前に考慮していない要素が多かったお陰で後々苦労する場面が多かったからです。例えばスマホを横に倒した時にどうなるかを考えていなかった(縦幅がすごく短くなります)ので、メニューが見切れたりといった現象が起きて修正が大変でした。コーディングに取り掛かる前にちゃんと色んな要素を吟味してデザインしておくことでその後が楽になります。

今思い返してみるとブレイクポイントを意識しつつ色々なサイズでモックアップを作っていたら気づいたなということも多かったので、レスポンシブなサイトを作りたければモックアップは様々な機種サイズで作成した方がよいかもしれません。なおテーマ作成においては下に示すページのデザインを考えていきます。

  • トップページ
  • アーカイブページ(カテゴリー、日付、検索結果)
  • 404ページ
  • 固定ページ(汎用的なページ、お問い合わせページ)
  • 記事ページ

当ブログではそれぞれについてモックアップを作成しました。

 

モックアップ作成に使ったツール

SketchなどFigmaOrigami Studioなど様々なモックアップ・プロトタイプを作るツールがあるそうなのですが、僕が使用しているのはAdobe XDです。他のツールを使用していないので比較はできませんが、すごく使いやすくて気に入っています。

例えばリピードグリッドというあるデザインパターンを繰り返したいときに便利な機能があります。

またよく使うボタンのデザインやフォント、色を登録して再利用できるアセット機能などもあります。

とても短時間でモックアップを作れるので、これでデザインをいじくりまわしてあれこれ試すことができます。無料で使えるプランもある(スタータープラン、共有等に制限がかかる)ので興味がある方は使ってみてください。

 

まとめ

今回はモックアップ作成について記事を書きました。皆さんも自分でサイトを作ってみよう!という時はまずは目的を確認して構造を決めてそれに添ったモックアップなどを作ることをおすすめします。

次はWordPressテーマの構成についての説明記事を書こうと思います。

return-top