設計をしっかりとする・後編 #03
前回の記事にて申し上げた通り、ワイヤーフレーム設計をこの記事に記載していきます。スマホとPCで表示が変わる仕様です。
トップページ
スマホ版
PC版
簡単な機能紹介と共に、ログイン及びサインアップ画面へと誘導します。ログイン及びサインアップは、ボタンをクリックした時に現れる、以下のようなモーダルウィンドウ内にて行えます。
ホーム画面
スマホ版
PC版
左上の「表示切替」をクリックすることで、カレンダーモードとプレビューモードを切り替えられます。カレンダーモードでは、画面上部にカレンダーが表示され、日付クリックで日記を閲覧できます。プレビューモードでは、日付ごとに日記がプレビューされており、クリックで詳細を閲覧できます。
また、右上の「日記を書く」とクリックすると、その日の日記を書く画面へと変遷します。
日記の閲覧・編集
スマホ版
PC版
右上の「編集」をクリックすることで、レイアウトをほぼそのままに、編集画面へと移行します。
マイページ
スマホ版
PC版
様々な記録を閲覧できます。「ユーザー名」と「女の子からの呼び方」は、その欄をクリックすることで編集ができます。
ワイヤーフレーム設計は以上となります。こちらもCacooというサイトツールを使用して作成しました。本当に手軽で扱いやすいです。
次回からはいよいよ、このワイヤーフレームを基に、マークアップを行っていきます。
ちなみに以下は、以前にチャットサイトを作った時に手描きで製作したワイヤーフレームです。
前回はこちら↓
