ポートフォリオサイトをデザインからAstroで実装までしてみた(ワイヤーフレーム編）
Published on 2023-01-23
Written by motogram
この記事はZennでも公開しています。
https://zenn.dev/motogram/articles/40e87ce6391f68
前回の記事に引き続き、今回はポートフォリオサイトをデザインから実装までする時の「ワイヤーフレームを作る」ステップです。
おさらい
前回の記事はこちら
https://zenn.dev/motogram/articles/611687e538e0ef
- デザインコンセプトを決める
- ページ構成を考える
- ワイヤーフレームを作る(←ココ)
- デザインカンプを作る
- コーディングする
それではまいりましょう。
ワイヤーフレームを作る目的
そもそもワイヤーフレームってなぜ必要なのでしょうか？
ワイヤーフレームを作るのにはそれなりに時間がかかるので、 最初からデザインを作ればいいのでは？なんて疑問をお持ちの方もいらっしゃるかもしれませんね。
ワイヤーフレームは例えるなら家を建てるときの設計図のようなものです。
設計図なしで家を建てることはありませんよね。
その設計図を元に工事をするのが、デザインです。
しっかりとした設計図があれば工事がスムーズに進むのと同じで、 しっかりとしたワイヤーフレームがあることで、デザインをスムーズに進めることが出来ます。
つまりワイヤーフレームを作る目的は、「デザインを作る時に余計なことを考えずに集中できる」ということです。
多少時間をかけてでもワイヤーフレームをしっかり作りこむことで、この後のデザイン作成がとても捗ります。
ワイヤーフレームを作るでのポイント
ワイヤーフレームを作る時にはどのようなポイントを押さえておくとよいでしょうか。
人によって考え方が分かれる部分もあるかもしれませんが、私は以下の点を意識しています。
各要素のメリハリ
サイト内に載せる各要素にメリハリをつけることで、情報の優先順位が分かるようにします。
テキストのサイズ
見出しや本文など、どのテキストを目立たせて、どのテキストを目立たせないか。
画像サイズ
どの画像を目立たせて、どの画像を目立たせないか。 特に画像はコンテンツの中でも目に付きやすいので、メリハリをしっかり付けるようにします。
情報に過不足がないか
掲載すべき情報はすべて反映させる必要があります。
デザインを作る段階で、追加で必要なものが出てくると、最悪の場合、全て作り直さないといけなくなるかもしれません。
レイアウト
各要素をどのように配置するかを決めます。 この時も、デザイン時点で変更するのはとても大変なので、ワイヤーフレームでしっかりとレイアウトを決めてあげます。
ワイヤーフレーム作成の手順
上記のポイントを踏まえて、ワイヤーフレームを作成していきます。 作成する手順は以下の通り進めます。
- スタイルの作成
- コンポーネントの作成
- レイアウトの作成
スタイルの作成
主にカラーとフォントを対象にスタイルを用意します。
ワイヤーフレームを作る際は配色は考えません。 グレースケールだけを用意します。
次にフォントスタイルを作成します。 フォントスタイルを用意しておくことで、ワイヤーフレームを作成するときに、フォントの一覧から選択できるようになります。
今回は、12pxから64pxまでのサイズと、それぞれのサイズに対してNormalとBoldの2種類を用意しました。
コンポーネントの作成
ワイヤーフレーム内で使い回しができるように最低限必要になりそうなコンポーネントをこの段階で作成しておきます。
ワイヤーフレームを作成している段階で追加で必要になってきた場合は、その都度作っていきます。
最終的に、以下のようにコンポーネントを作成しました。
レイアウトの作成
ここまでできたら、いよいよレイアウトを作成していきます。
今回はレスポンシブ対応として、PC用に横幅1440px、SP用に横幅375pxで作成しました。
仕上がったワイヤーフレームが以下です(トップページのみ掲載）。
以上でワイヤーフレームの作成は完了です。
ここまでできると最終的なデザインが大分イメージしやすくなると思います。
次のステップはデザインカンプの作成です。