出来上がりのサイト

薬価検索アプリmedipraはこちらです
→　見に行ってみる

前回の内容はこちら。
【開発日記】薬価検索アプリno.2 〜設計・機能の洗い出し〜

開発背景などはこちら
【開発日記】薬価検索アプリno.1 〜開発概要→企画〜

現在の進捗状況

1.必要な機能の洗い出し
2.必要な画面設計　⬅︎今ココ
3.データベース設計
4.Railsでアプリケーションの雛形作成
5.大きな機能から順に実装
6.テストコードを書いて動作を担保する
7.リファクタリングして整理する
8.デプロイ

画面設計

今日は画面設計をしてみます。
開発するアプリケーションで必要な画面の設計をします。画面がどれだけ必要か、どのような画面にするかをこの段階で決めます。
一応、元ネタというか、参照サイトはこちらです
薬価サーチ

大体は同じように実装してみようかと思います。

ワイヤーフレーム

今回のアプリは画面設計から自分なので、せっかくなのでワイヤーフレームなるものもやってみようかと思います。

ワイヤーフレームを作る際に使えるツールはこちらによくまとまっていますのでどうぞ
Webディレクターにオススメしたい！さくさくワイヤーフレームが作れちゃう便利ツールまとめ

今回は、prottというサービスを使ってみます。
30日間は無料です。

とりあえず作ってみました。

こういうの、考え始めると難しいですね。。。
まずはこの程度はMVPとして作りたい、という目標の意味も込めて。

この辺は少しずつ改善していきます。

prott

無料期間は30日間しかないですが、使い方は本当に簡単で楽なので、本格的にワイヤーフレームを作る必要が出てきたらぜひ使いたいです。

左サイドにはフォームボタンや、パンくず、ページネーションなんかもすでに用意してあって、そのままドラッグすればOK。
Webに合わせたものや、iOSに合わせたものも色々用意してあるので、なんとなく並べるだけでも十分それっぽくなる勢い。

画面右にはプロパティが表示され、文字の大きさ、背景色の変更などが行えます。

まとめ・所感

こういうデザインとかって、サイトの目的や、誰が使うか、何を伝えたいのかなどがはっきりしていないと全く決まらない。
今の開発では既存サイトの改善版を作ろうとしているだけなので、自分で欲しいイメージがある程度はあるけど、全くのゼロからサイトを作ろうとしたら、本当に大変な仕事だと実感。
デザイナーさんありがとうございます。（一緒に働いたことないけど）

最後までおつきあいいただきありがとうございました。

次回、に続きます。