はじめに
今回はVue.jsを使ってポートフォリオを作成する方法を紹介します。
開発環境の構築からコーディングなど数回に分けて紹介していきますので、ぜひご覧ください。
前回からの続きになります。
前回の記事はコチラ↓
はじめに 今回はVue.jsを使ってポートフォリオを作成する方法を紹介します。 開発環境の構築からコーディングなど数回に分けて紹介していきますので、ぜひご覧ください。 また、今回作成するポートフォリオの完成形はコチラになります[…]
さて、今回のテーマは「ページ設計」です。参りましょう！！
ページ設計について
今回のテーマでは「ページ設計」つまり「どのようなポートフォリを作るのか」について考えていきます。
前回の記事で示した例のようにするのもよし、それ以外に独自に作りたい設計にするのも良しです。
Vue.jsを使ってコーディングをする前にこの工程を行うことでコーディングがしやすくなるため、急がない限りは行いましょう！！
また、ページ設計の第一段階については以下のようなものになります。
続いて、これらのページの細かい設計について考えていきます。
プロフィールページ
プロフィールページでは主に名前や自己紹介文、自分自身を表す画像など表示します。
SNSなどを使っている方はアカウントのリンク先も示しておくと良いでしょう。
今回の用件で私が決定したプロフィールページの大まかなデザインはこんな感じになります。
続いて製作物一覧ページの設計についてです。
製作物一覧ページ
製作物一覧ページでは今までに作成してきた作品などを紹介するページになります。
製作物は画像によって見てすぐにしたいと考えています。また、今後も増えていくことを考えていくと、検索バーやタイル表示であると、見やすいと考えます。
これらのことをまとめていくと、製作物一覧ページのデザインは次のようになります。
続いてスキル一覧ページの設計についてです。
スキル一覧ページ
スキル一覧ページでは使用スキルがひと目でわかるようになるページになります。
スキル一覧では、スキルのアイコンを挿入することでとてもわかりやすくなります。
また、アイコンを表示するだけでなく、スキル名を表示することでよりわかりやすくなります。
これらの条件をまとめていくと、スキル一覧ページのデザインは次のようになります。
続いてはブログ一覧ページになります。
ブログ一覧ページ
ブログ一覧ページでは運営しているブログ一覧を表示します。
僕の場合では2つのブログを運営していますので、二つのブログの画像プレビューと説明、リンクを加えていきたいと考えています。
これらの条件からデザインは次のようになります。
終わりに
今回は『Vue.jsを使ったポートフォリオの作り方』のpart2としてページ設計について考えていきました。
次回以降ではコードを記述していくため、VSCodeなどのコードエディタを準備しておいてください！
お疲れ様でした！！