底辺Fラン卒エンジニアブログ

Fラン卒SESエンジニアがアウトプットしてます。

ポートフォリオ作成(ワイヤーフレーム)

こんにちは。まさきです。

前回の記事から4日たってしまいました。

masaki-f.hatenablog.com

珍しく週末に予定が2件入ってバタバタしておりました。

来週も美容院に友人と映画鑑賞など忙しい6月を過ごしています。

しかし毎日ちまちま作業はしておりまして、本日ワイヤーフレームが完成しました。

最初は丁寧に丁寧にを意識していたのですが、なかなかイメージが掴めずとりあえず大雑把に全体像だけをイメージして作成しました。

今回もcacooで作成しています。

cacoo.com

私は無料版に登録しているのですが、無料版は6枚までしか図を作成することができず、先日のサイトマップで1枚使ってしまっていることからワイヤーフレームは5枚となりました。

有料版に登録も考えましたが、今回は初めてのアプリ開発となるのでとりあえず無料版で5枚に収める形で作成しました。

ここではとりあえず2枚公開しておきます。

f:id:rd0412:20210620150240p:plainf:id:rd0412:20210620150249p:plain
ワイヤーフレーム

だいぶ大雑把になりますがこんな感じです。

実際に画面を開発するときは、あらかじめ大雑把なイメージがあればそれを実装して後から必要なものを追加することができます。

私が企業の研修で行った開発研修でも最初のサイトイメージと全く違うものが最後にはできましたが、最初に枠があるととても作業しやすかったです。

てなわけでワイヤーフレームの作成は終了!

次は④デザインの作成

と行きたいところなのですが、とりあえずここもスキップしたいと思います。

やはりサイトの大まかなイメージが無いと、デザインがよく思い浮かばなそうなのです。 (エンジニアとしては、よく無いかも知れませんが...)

昔から絵心が無く、デザイン系のセンスは皆無であると自覚しております。

なので、ある程度の基礎の画面レイアウトと機能が実装できた段階でレイアウトイメージを作成して実際に適用させたいというのが今の私の方針です。

以上のことにより⑤データモデルの設計に取り掛かります。

ワイヤーフレーム作成では、具体的な項目を全て文字で表現してあったのでこの工程は中々に時間がかかりそうです。

それでは、作業に入ってきます。