【ポートフォリオは設計が8割】webエンジニアになるためのポートフォリオ設計方法後編

かよ

2021年4月4日 19:04

webエンジニアを未経験から目指す際、ポートフォリオが必要になると思います。

プログラミングを勉強できる教材はたくさんあっても、
どんな設計方法でオリジナルサービスを作ればいいか体系的に学べる記事は少なく、ポートフォリオ作成に困ることが多いと思います。

このシリーズでは未経験からwebエンジニアになった私が、
初心者目線でポートフォリオの作り方を解説します。

今回の記事ではポートフォリオを作る際にはじめに行う設計方法について
図や写真を用いて実際に私が作ったものを載せながら説明してきます!

動画でも、ダイジェストで学べます。

前回の記事では、ポートフォリオを作る手順と、ポートフォリオのコンセプトの整理の方法を書きました。

今回はその後編で、

1. 画面設計
2. 機能設計
3. クラス設計

この3つについて、実際に私がつくったものの載せながら説明していきます。

1.画面設計

画面設計とは、サービスの各画面を決めることです。

前回の記事で紹介したコンセプトの整理が終わったら、サービスの画面設計をしていきます。

画面設計とは写真のように、文字や写真、ボタンなどをどこに置くかをコーディング前に事前決めておくことです。

なぜ画面設計が必要なのか?

必要な理由としてはこの2点だと思います。

・実装がスムーズになる
・ポートフォリオの画面が綺麗になり、評価が上がる

実装がスムーズになる

画面の設計を最初にしておくことで、コードを書いている途中で、悩むことがなく、開発に集中できます。

ポートフォリオの画面が綺麗になり、評価が上がる

機能がそんなに充実していなくても、画面が綺麗なだけで、ポートフォリオのクオリティが高く見えます。

逆に、どんなに機能がすごくても、画面が汚いと、マイナスに働くことがあります。

具体例でいうと、
●デザインを全く気にしないで作ったポートフォリオ

●デザインを気にして作ったポートフォリオ

全く同じ機能でも後者のほうがクオリティが高く見えませんか?

画面設計の勉強方法とやり方

画面設計が大事なのはわかったとしても、デザイナーじゃないし、そんなに画面設計に時間をかけていられない...。

そんな方に最短の時間で、効率よくデザインを勉強し、画面設計できる方法を教えます...!

デザインの基礎をざっくり学ぶ(1h)

私は下記のサイトでデザインをさらっと学びました。

ユーザーインタフェイスのデザインのヒント(Apple)
Appleが提案しているヒューマンインターフェースのガイドラインです。

マテリアルデザイン(Google)
Googleが提案しているヒューマンインターフェースのガイドラインです。

Cocoda

デザインをつくる>基礎から学べるのところで、デザインの基礎的な部分を実践的に学べます。

似たようなサービスのデザインを見まくる(30min)

サラッと勉強したら、自分が作りたいサービスに似ているサービスのデザインを見まくりましょう!

例えば作りたいのが、写真投稿サービスだったら、Instagramやpinterestが参考になりますね。

●サービスのプロトタイプを作る(2h-)

軽く勉強したら、実際にサービスのモックを作っていきます。
プロトタイプを作るツールは色々ありますが、今回はAdobe XDを使います。

Adobe XDを選んだ理由は以下の3つです。

・操作が簡単
・無料でクオリティが高いものを作れる
・型が用意されていて簡単につくれる

デザインをガッツリ勉強していないエンジニア志望、またはエンジニアの方でも簡単に使えるのでおすすめです。

step1.必要な画面を箇条書きする

サービスを作る上で、必要となる画面を整理していきます。
作るサービスによりますが、大体こんな感じになると思います。

● 作るサービス
目標達成サービス
● 主な機能
・目標登録機能
・目標に向けて行動すると木が育つ機能
・シェア機能
● 必要な画面
・新規登録画面
・ログイン画面
・目標一覧画面
・目標詳細画面
・目標登録画面
・ユーザー詳細画面
・ユーザー編集画面
・トップページ(後ででも可)
・チュートリアル画面(後ででも可)