読者です 読者をやめる 読者になる 読者になる

UI Fundamentals for Programmers (RailsConf2009レポート)

«RailsConf2009のレポート一覧

開発とデザイナー的ポジションを兼務してます須藤です。 railsconf2日目、37signalsのデザイナーRyan Singerのセッションに参加しました。

「UI FUNDAMENTALS FOR PROGRAMMERS」と題したこのセッションはかなりの人気のようで、用意された大きめの会場でも立ち見が出る程の盛況ぶりでした。

曰く、UI設計を行なうときにModeling,Screens,Actions,Templatesの4つが重要ということでした。

まずModelingですが、UIはソフトウェアレイヤの一番表側にあり独立して存在している訳ではないということ、但しユーザーから見ればUIが全てでありソフトウェアの設計はUIから(必要なものから)始めなければならないと言っていました。 最終的なインターフェースに適したなモデル設計をすべきという話もしていて、プログラマ脳とデザイナー脳を交互に使って仕事をしている自分としては、とても共感できる内容でした。 どのメソッドをどのコントローラに書くべきか、どの部分をどういう規則に基づいてpartialに切り出すかなど、普段なんとなくやってしまう事が多いですが、最終的なUIによって決定すべきというのは斬新かつ納得できる話でした。

2つ目のScreensでは、ページ内の各要素がきちんとデザインされることによってどのような印象となるのか、とても分かり易いきれいなスライドを用いて具体的に説明していました。 ジャンプ率や版面率、情報の分類毎に取るべき適切な余白、コントラストによる視認性・操作性の優劣などといった、デザイナーならではの内容でした。 見出し、本文、サイドバー、ボタンリンクを含んだサンプルページをいくつか表示しながら、各要素のデザインが与える操作への影響について説明していました。

その他、Actionsの項では、「every action has a beginning middle and an end」というテーマで、一つのアクションが完結するまでのユーザービリティ的な配慮を、Templatesの項では「NO HTML in HELPERS DONT BE CLEVER」「CSS and JS follow the same REST-inspired naming conventions」といったテーマを掲げ、ヘルパーの使い方や、静的ファイルの管理方法について説明していました。

今回プログラマーの視点でこのセッションを聞いていましたが、こういうことを体系的語れるデザイナーは本当に少なく、プログラマーとデザイナーがなかなか歩み寄れない様な状況を解決するヒントを得たような気がしました。 自分の目指すべき方向性も再確認でき、とても楽しい時間を過ごせました。

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/