Uploaded byYuya Takahashi

KEY, PDF188,180 views

これくらいはやってほしいWebデザイン

PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )

Design◦

これくらいはやってほしいWebデザイン

1.
これくらいはやってほしい Webデザイン
2.
プロフィール • 高橋裕也（@takahashiyuya） • CakePHPが大好きなWebデザイナー •アシアル
3.
Monaca（もなか） • HTML + CSS + JavaScript • IOS、Android の同時開発 • ブラウザで動く • 使いやすいデバッガ • 気軽にビルド
4.
はじめに
5.
はじめに • デザインセンス不要
6.
はじめに • デザインセンス不要 • グラフィックソフト不要
7.
はじめに • デザインセンス不要 • グラフィックソフト不要 •プログラミング言語不要
8.
はじめに • デザインセンス不要 • グラフィックソフト不要 •プログラミング言語不要必要なのはあなたのやる気だけ
9.
３つだけ
10.
噂の３つのテクニック • グリッドシステム • ホワイトスペース •アプローチ
11.
こんな感じ
12.
グリッドシステム
13.
グリッドシステム • 垂直水平にガイド • 整然とした印象 • 応用が利く
14.
グリッドシステム（基本）
15.
グリッドシステム（応用）
16.
ホワイトスペース
18.
意外とね
19.
意図して配置する
20.
アプローチ
21.
アプローチ • 見た瞬間伝わる • 費用対効果が高い • 応用が利く
22.
たしかに
23.
グリッドシステム
24.
ホワイトスペース
25.
アプローチ
26.
ぜひ
27.
ご静聴ありがとうございました。

Editor's Notes

#2 &#x52D5;&#x6A5F;&#x3092;&#x8A71;&#x3059;\n
#3 &#x4E3B;&#x306B;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x3068;&#x3057;&#x3066;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x3084;&#x30B5;&#x30FC;&#x30D0;&#x30B5;&#x30A4;&#x30C9;&#x306E;&#x958B;&#x767A;&#x3092;&#x3084;&#x3063;&#x3066;&#x307E;&#x3059;&#x3002;\n&#x305F;&#x307E;&#x306B;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x3001;&#x3042;&#x3068;&#x306F;&#x30B9;&#x30AF;&#x30FC;&#x30EB;&#x3067;&#x30D5;&#x30EC;&#x30FC;&#x30E0;&#x30EF;&#x30FC;&#x30AF;&#x7DE8;&#x306E;&#x8B1B;&#x5E2B;&#x3092;&#x62C5;&#x5F53;&#x3002;\n&#x6700;&#x8FD1;&#x3001;Monaca&#x3092;&#x4F7F;&#x3063;&#x3066;iOS&#x3068;Android&#x306E;&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x30D7;&#x30ED;&#x30C0;&#x30AF;&#x30C8;&#x3067;&#x958B;&#x767A;&#x3057;&#x305F;\n
#4 &#x30C7;&#x30D0;&#x30C3;&#x30AC;&#x3088;&#x304B;&#x3063;&#x305F;\n
#5 \n
#6 &#x82B8;&#x8853;&#x3067;&#x306F;&#x306A;&#x304F;&#x3001;&#x8A2D;&#x8A08;&#x306E;&#x8A71;&#x3067;&#x3059;&#x3002;\n
#7 &#x30D5;&#x30A9;&#x30C8;&#x30B7;&#x30E7;&#x306E;&#x8A71;&#x3067;&#x3082;&#x306A;&#x3044;&#x3002;\n&#x30E6;&#x30FC;&#x30B6;&#x3092;&#x610F;&#x8B58;&#x3057;&#x305F;&#x30D3;&#x30E5;&#x30FC;&#x30FB;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;\n\n
#8 PHP&#x306E;&#x4E8B;&#x3092;&#x805E;&#x304D;&#x306B;&#x304D;&#x305F;&#x65B9;&#x304C;&#x591A;&#x3044;&#x3068;&#x601D;&#x3044;&#x307E;&#x3059;&#x304C;&#x30FB;&#x30FB;&#x30FB;\n
#9 &#x4F1A;&#x5834;&#x306E;&#x96F0;&#x56F2;&#x6C17;&#x6B21;&#x7B2C;&#x3067;&#x3001;&#x6C42;&#x4EBA;&#x306E;&#x8A71;&#x3057;&#x3088;&#x3046;&#x304B;&#x306A;&#x3002;\n
#10 &#x30CD;&#x30BF;&#x306F;&#xFF13;&#x3064;&#x3060;&#x3051;\n
#11 &#x3053;&#x306E;&#xFF13;&#x3064;&#x3092;&#x7D44;&#x307F;&#x5408;&#x308F;&#x305B;&#x308B;&#x3068;&#x4E00;&#x4F53;&#x3069;&#x3046;&#x306A;&#x308B;&#x306E;&#x304B;&#x30FB;&#x30FB;&#x30FB;\n&#x3068;&#x3044;&#x3048;&#x3070;\n\n\n
#12 &#x3053;&#x3093;&#x306A;&#x611F;&#x3058;\n
#13 \n
#14 &#x300C;&#x30B0;&#x30EA;&#x30C3;&#x30C9;&#x30B7;&#x30B9;&#x30C6;&#x30E0;&#x300D;&#x3068;&#x306F;&#x3001;&#x753B;&#x9762;&#x4E0A;&#x306B;&#x5782;&#x76F4;&#x30FB;&#x6C34;&#x5E73;&#x306E;&#x30AC;&#x30A4;&#x30C9;&#x30E9;&#x30A4;&#x30F3;&#x3092;&#x7F6E;&#x3044;&#x3066;&#x3001;\n&#x305D;&#x306E;&#x30AC;&#x30A4;&#x30C9;&#x30E9;&#x30A4;&#x30F3;&#x3088;&#x3063;&#x3066;&#x69CB;&#x6210;&#x3055;&#x308C;&#x308B;&#x683C;&#x5B50;&#xFF08;&#x30B0;&#x30EA;&#x30C3;&#x30C9;&#xFF09;&#x306B;&#x5408;&#x308F;&#x305B;&#x3066;&#x3001;&#x6587;&#x5B57;&#x3084;&#x753B;&#x50CF;&#x306A;&#x3069;&#x3092;&#x914D;&#x7F6E;&#x3057;&#x3066;&#x3044;&#x304F;&#x3053;&#x3068;&#x3092;&#x8A00;&#x3044;&#x307E;&#x3059;&#x3002;\n\n\n&#x60C5;&#x5831;&#x304C;&#x6574;&#x7406;&#x3055;&#x308C;&#x3066;&#x3044;&#x3066;&#x975E;&#x5E38;&#x306B;&#x52B9;&#x7387;&#x304C;&#x3088;&#x3044;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x3068;&#x3044;&#x3046;&#x4E8B;&#x3067;&#x3001;\n&#x8AAD;&#x307F;&#x3084;&#x3059;&#x304F;&#x6574;&#x7136;&#x3068;&#x3057;&#x305F;&#x5370;&#x8C61;&#x306E;&#x30DA;&#x30FC;&#x30B8;&#x30C7;&#x30B6;&#x30A4;&#x30F3;&#x306B;&#x4ED5;&#x4E0A;&#x3052;&#x308B;&#x4E8B;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;\n\n\n&#x6C7A;&#x307E;&#x3063;&#x305F;&#x4F4D;&#x7F6E;&#x306B;&#x753B;&#x50CF;&#x3084;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x3092;&#x306F;&#x3081;&#x8FBC;&#x3093;&#x3067;&#x3044;&#x304F;&#x3053;&#x3068;&#x3067;\n&#x898B;&#x308B;&#x4EBA;&#x306E;&#x8996;&#x7DDA;&#x3092;&#x8FF7;&#x308F;&#x305B;&#x308B;&#x3053;&#x3068;&#x306A;&#x304F;&#x3001;&#x898B;&#x3084;&#x3059;&#x3044;&#x8AAD;&#x307F;&#x3084;&#x3059;&#x3044;&#x30EC;&#x30A4;&#x30A2;&#x30A6;&#x30C8;&#x3092;&#x5B9F;&#x73FE;&#x3059;&#x308B;&#x4E8B;&#x304C;&#x53EF;&#x80FD;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;\n\n&#x5FDC;&#x7528;&#x306E;&#x8A71;&#x306B;&#x7D9A;&#x304F;\n
#15 \n
#16 \n
#17 &#x30DB;&#x30EF;&#x30A4;&#x30C8;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x306F;&#x3001;&#x6587;&#x5B57;&#x3084;&#x753B;&#x50CF;&#x306A;&#x3069;&#x306E;&#x30A8;&#x30EC;&#x30E1;&#x30F3;&#x30C8;&#x304C;&#x4F55;&#x3082;&#x306A;&#x3044;&#x90E8;&#x5206;&#x306E;&#x3053;&#x3068;&#x3067;&#x3059;&#x3002;\n\n\n
#18 &#x30DB;&#x30EF;&#x30A4;&#x30C8;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3068;&#x805E;&#x304F;&#x3068;&#x3001;&#x96E3;&#x89E3;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;&#x8A00;&#x8A9E;&#x306E;&#x3053;&#x3061;&#x3089;&#x3092;&#x601D;&#x3044;&#x6D6E;&#x304B;&#x3079;&#x305F;&#x65B9;&#x3082;&#x3044;&#x308B;&#x304B;&#x3082;&#x3057;&#x308C;&#x307E;&#x305B;&#x3093;&#x306D;&#x3002;\n\n&#xFF08;&#x30EA;&#x30B9;&#x30CA;&#x30FC;&#x306B;&#x77E5;&#x308A;&#x5408;&#x3044;&#x591A;&#x304B;&#x3063;&#x305F;&#x3089;&#x6319;&#x624B;&#x6C42;&#x3081;&#x3088;&#x3046;&#x304B;&#x306A;\n&#xFF08;&#x3093;&#x3067;&#x3001;&#x624B;&#x306F;&#x6319;&#x304C;&#x3089;&#x306A;&#x3044;&#x306F;&#x305A;&#x3002;\n&#xFF08;&#x6B63;&#x3057;&#x3044;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3092;&#x610F;&#x8B58;&#x3057;&#x3066;&#x3044;&#x308B;&#x3068;&#x3044;&#x3046;&#x30D5;&#x30EA;&#x3067;&#x3082;&#x3063;&#x3068;&#x610F;&#x8B58;&#x3059;&#x308B;&#x3053;&#x3068;&#x3092;&#x62BC;&#x3057;&#x51FA;&#x3057;&#x305F;&#x3044;&#x3002;\n\n&#x3042;&#x307E;&#x308A;&#x666E;&#x6BB5;&#x610F;&#x8B58;&#x3059;&#x308B;&#x3053;&#x3068;&#x306F;&#x306A;&#x3044;&#x3068;&#x601D;&#x3046;&#x3093;&#x3067;&#x3059;&#x304C;&#x3001;\n&#x30DB;&#x30EF;&#x30A4;&#x30C8;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x306F;&#x30DA;&#x30FC;&#x30B8;&#x5185;&#x3067;&#x6700;&#x3082;&#x9762;&#x7A4D;&#x304C;&#x5927;&#x304D;&#x3044;&#x30A8;&#x30EC;&#x30E1;&#x30F3;&#x30C8;&#x3067;&#x3059;&#x3002;\n
#19 &#x3064;&#x3044;&#x3064;&#x3044;&#x753B;&#x50CF;&#x3084;&#x6587;&#x5B57;&#x306E;&#x914D;&#x7F6E;&#x306B;&#x6C17;&#x3092;&#x3068;&#x3089;&#x308C;&#x3066;&#x3057;&#x307E;&#x3044;&#x307E;&#x3059;&#x304C;&#x3001;\n&#x9006;&#x306B;&#x3053;&#x306E;&#x30DB;&#x30EF;&#x30A4;&#x30C8;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3092;&#x3046;&#x307E;&#x304F;&#x6271;&#x3046;&#x3053;&#x3068;&#x304C;&#x91CD;&#x8981;&#x3002;\n\n
#20 &#x300C;&#x3059;&#x3079;&#x3066;&#x306E;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3092;&#x610F;&#x56F3;&#x3057;&#x3066;&#x914D;&#x7F6E;&#x3059;&#x308B;&#x300D;\n&#x3053;&#x308C;&#x3092;&#x62BC;&#x3059;&#x3060;&#x3051;&#x3002;\n\n&#x30B3;&#x30F3;&#x30D3;&#x3068;&#x306A;&#x308B;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x306B;&#x7E4B;&#x3052;&#x308B;\n
#21 &#x30E9;&#x30B9;&#x30C8;\n\n&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x3068;&#x306F;&#x3001;&#x8FD1;&#x63A5;&#x3068;&#x3082;&#x547C;&#x3070;&#x308C;&#x307E;&#x3059;&#x3002;\n&#x95A2;&#x9023;&#x3059;&#x308B;&#x7D50;&#x3073;&#x3064;&#x304D;&#x306E;&#x5F37;&#x3044;&#x8981;&#x7D20;&#x306F;&#x8FD1;&#x3065;&#x3051;&#x3066;&#x914D;&#x7F6E;&#x3059;&#x308B;&#x3002;\n
#22 &#x7279;&#x5FB4;&#x30FB;&#x30E1;&#x30EA;&#x30C3;&#x30C8;&#x306B;&#x3064;&#x3044;&#x3066;&#xFF13;&#x3064;\n\n&#x30D1;&#x30C3;&#x3068;&#x898B;&#x3067;&#x7406;&#x89E3;&#x3067;&#x304D;&#x308B;&#x3002;\n&#xFF08;&#x753B;&#x50CF;&#x3092;&#x898B;&#x308C;&#x3070;&#x3001;&#x305D;&#x308C;&#x306B;&#x95A2;&#x3059;&#x308B;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x306F;&#x3069;&#x308C;\n&#xFF08;&#x30C6;&#x30AD;&#x30B9;&#x30C8;&#x3092;&#x8AAD;&#x3081;&#x3070;&#x3001;&#x95A2;&#x9023;&#x3059;&#x308B;&#x753B;&#x50CF;&#x306F;&#x3069;&#x308C;\n\n&#x30ED;&#x30FC;&#x30EA;&#x30B9;&#x30AF;&#x30FB;&#x30CF;&#x30A4;&#x30EA;&#x30BF;&#x30FC;&#x30F3;\nUI&#x306B;&#x529B;&#x3092;&#x5165;&#x308C;&#x3066;&#x308B;&#x30B7;&#x30E7;&#x30C3;&#x30D4;&#x30F3;&#x30B0;&#x30B5;&#x30A4;&#x30C8;&#x306A;&#x3089;&#x5E38;&#x8B58;\n\n&#x307E;&#x305F;&#x3042;&#x3089;&#x3086;&#x308B;&#x30A8;&#x30EC;&#x30E1;&#x30F3;&#x30C8;&#x3067;&#x6709;&#x52B9;&#x3067;&#x3059;&#x3002;\n&#x4F8B;&#x3048;&#x3070;&#x898B;&#x51FA;&#x3057;&#x306B;&#x5BFE;&#x3057;&#x3066;&#x306E;&#x5C0F;&#x898B;&#x51FA;&#x3057;&#x3001;&#x307E;&#x305F;&#x305D;&#x308C;&#x306B;&#x7D9A;&#x304F;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;\n&#x30D6;&#x30ED;&#x30B0;&#x306A;&#x3069;&#x898B;&#x308B;&#x3068;&#x305D;&#x306E;&#x69D8;&#x304C;&#x308F;&#x304B;&#x308B;\n\n
#23 &#x3053;&#x3053;&#x3067;&#x30DB;&#x30EF;&#x30A4;&#x30C8;&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x3068;&#x30A2;&#x30D7;&#x30ED;&#x30FC;&#x30C1;&#x304C;&#x7D44;&#x307F;&#x5408;&#x308F;&#x3055;&#x308B;&#x597D;&#x4F8B;&#x3092;&#x7D39;&#x4ECB;&#x3059;&#x308B;\n\n&#x7D42;&#x308F;&#x3063;&#x305F;&#x3089;&#x304A;&#x3055;&#x3089;&#x3044;&#x2192;&#x7D42;&#x4E86;&#x306E;&#x6D41;&#x308C;\n
#24 \n
#25 \n
#26 \n
#27 \n
#28 &#x30D1;&#x30F3;&#x30D1;&#x30AB;&#x30D1;&#x30FC;&#x30F3;\n

これくらいはやってほしいWebデザイン

More Related Content

What's hot

Viewers also liked

これくらいはやってほしいWebデザイン

Editor's Notes