0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【開発日記】薬価検索アプリno.3 〜設計・画面の設計〜

Last updated at Posted at 2019-10-24

##出来上がりのサイト
薬価検索アプリmedipraはこちらです
→ 見に行ってみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次回、に続きます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?