Home > CakePHP関連 > モックアップ画面をいろいろ作る(CakePHP修行 #010)

モックアップ画面をいろいろ作る(CakePHP修行 #010)

さてCakePHPのお勉強。前回までのあらすじはこちら。

» CakePHP修行! アーカイブ | i d e a * i d e a

それから前回までの記事への突っ込みありがとう>青い人!

さて今回はモックアップ画面の作成です。最初は「デザインはチョーてきとーでー」と思ったのですが、開発する上でテンションをあげるにはやはりデザインから。CakePHPと直接関係ないですが、画面のモックアップを作っていきます。

今回とりあえず作るのは次の3画面。作っているうちに課題は見えてくるでしょう。

  • ログイン画面
  • 自分の「ホーム」画面
  • 友達の「ホーム」画面

ま、ちょろちょろと作るので本気度30%ぐらいで。シンプルかつミニマムがコンセプト。あと面倒なんでインターフェースはすべて英語にします(英語のタイポグラフィーのがきれいだから)。

つうわけでつくってみた画面。

■ ログイン画面

ログインしていない状態では全部これが出るようにします。

mock_login.png

↑ とりあえず全表示状態なんでエラーメッセージも出しています。

■ 自分のホーム画面

こんな感じじゃないすかね?(http://www.codexcode.com/かな)

mock_home.png

↑ ま、のちのち足したい機能が出てくるかと思いますがそれはそのとき考えましょう。写真は拝借しても怒りそうにない人から拝借しました。

■ 友達のホーム画面

自分のホーム画面のトップを残しつつ、その下を友達の画面に。わかりやすいかな・・・ま、いいです。ユーザビリティとかそういうのは。とりあえず。

URL的には http://www.codexcode.com/users/25 とかかな。

mock_friends.png

↑ メニュー的にはこんなところでしょ。今思ったけど友達の日記は友達の友達の日記じゃなくて友達の日記一覧だな・・・。

ただのモックアップ画面なんで細かいところは突っ込まないように。設定画面とか日記投稿画面はあとからつくります。今思ったけど日記に対するコメント作りたいな・・・。ま、あとでやりましょう。

■ 次回予告

で、全部つくると大変なんで、とりあえずログインしたら自分のホーム画面に行って自分のプロフィールが表示されるところまで作ってみたいと思います。

@taguchiをフォロー!
Twitterもやっています!
Posted on June 28th, 2007 and last modified on August 4th, 2009.

Comments:1

akiyan.com 07-06-28 (Thu) 17:59

CakePHPでDBに関連しないパラメータはヘルパーで書くべきか? (Re:CakePHP修行! | idea*idea)

CakePHP修行! | i d e a * i d e aが更新されました。少々長くなるので2回に分けます。 まずはURIについて。 初期状態のURIの…

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://www.ideaxidea.com/archives/2007/06/cakephp_010.html/trackback
Listed below are links to weblogs that reference
モックアップ画面をいろいろ作る(CakePHP修行 #010) from IDEA*IDEA ~ 百式管理人のライフハックブログ
pingback from 「CakePHP修行」を追う #5 - ElectronicBrain is eating BreakFast 09-04-08 (Wed) 12:13

[...] モックアップ画面をいろいろ作る(CakePHP修行 #010) – IDEA*IDEA ~ 百式管理人のライフハックブログ ~ [...]

Home > CakePHP関連 > モックアップ画面をいろいろ作る(CakePHP修行 #010)

最近の記事
カテゴリー別
過去記事一覧

Return to page top