タイトルからもわかるように、これはcodeが書けなかったのが少しそれなりに書けるようになった、ホームページの励ましの文です。(う~)。
まず筆者は自己の背景を紹介します。大学と研究所共に工業設計です。大学の頃は実体の製品設計に専念し、研究所に入ってからはユニバーサルデザイン、高齢者用マンマシンインターフェイス、認知心理学などの領域を始めました。卒業後は、非実体のデザインに対して興味(UIとUXなど)を持ち始めたため、IT業に入りUI Designerとなりました。しかし、分野が違うと全く見当が付かず、物事は馬鹿な者(筆者)の想像するような決して簡単なものではなく、勉強してきた設計理論を実務に応用するまではしばらく苦しい時期がありました。
ウェブページの基礎知識:
全くホームページデザインに触れたことがない人にとって、960grid systemという専門名詞を聞いても、その時頭の中には画面は全くないし、その他よくある元素用語も聞いても分かりません。チームのコミュニケーションを円滑にするため、私は時間を見つけてはエンジニアからこっそり勉強したり、知らないキーワードを耳にしたらすぐGoogleし、時には資料があまりにも多くて消化するのに何日もかかりました。しかし実際にやりながら勉強するという方法で早く成長できたので、おせっかいながらこの経験をみんなに共有します。
モジュール化、デザイン規範:
まず、みなさんには先にモジュ―ル化とデザイン規範の概念を理解してもらいましょう。デザインの角度から見て、この2つの名詞は大部分が“ブランドの識別”上で応用されます。たとえばプラットフォーム全体の色、押しボタンの形式、フォントと間隔などを定義し、デザイナーはその定義に従ってプラットフォームの元素libraryをデザインします。これらの元素が構成するデザイン規範がこのプラットフォーム(ブランド)の識別です。先端のエンジニアによると、これらのデザイン規範はもっともモジュ―ル化しやすく、つまり元素が繰り返し現れてもCSSを上書きする必要がないということです。もし何名かで力を合わせて特別なケースを作っても、間違って書いたり、元のデザインと異なるということを避けることができます。こうなると、開発過程はより簡潔に、時間を省けます。(デザイナーがデザイン規範を設計するデザインの前期では、かなり時間を使っていて、且つ詳しい文書を提供しなければなりません。しかし長期的に見たところ、企業あるいは製品のブランドを作り開発の効率を考えると、これは絶対に必要だ)
▲写真元:UI kits(from dribbble.com/)
HTML & CSS:
開発チームとのコミュニケーションを円滑にするため、先端言語(HTMLとCSS)から始めたが、どんどん底なし沼へ落ちていくとは思ってもいませんでした~
私達みんなが知っているように、新しい知識を学ぶ前にはよい教材を準備しなければなりません。筆者が同僚達の意見を総合し、基礎の翻訳書籍をみつけました:HTML&CSS:ウェブサイト設計は優化の道を作り、この本の最大の特色は図も文章も内容が豊富ですばらしいため、デザイナーに推薦します!
▲写真元:『HTML and CSS: Design and Build Websites』
良い教材だけでは不十分で、やはり実際の練習が一番重要です。そのため筆者はこの本を提案すると同時に、codeを打ってcodeのリズムを書く力を養いました。道具の部分は、みんなにエディターSublime Textのインストールを提案します。
この本は主にHTMLとCSS2の大部分に分かれており、簡単に言うとHTMLは人の骨格で、CSSは服のようなものです。私達はホームページを作成する時、HTMLがうまく書けるかどうかが非常に重要です。もしその人の骨格がめちゃくちゃだと、どんなに美しくて高価な服を着ても、写真写りはよくありません。この道理をよく理解しているエディターはHTMLの基礎を非常に細かく(HTMLTagsの語意の使用法など)入念に読んでいます。かつて言われたことは:Dreamwaverを使ってHTMLを作成できれば、より直覚で時間も節約できる(そうすると、HTMLを自分で書かなくてもよい)。私の提案は、できるだけこのような道具に頼らず自らCodeを書くことで、HTML Tagの使用法(CSSと組み合わせる時、もっと簡単にうまくできます)をよく理解することができます。
またCSSの学習については、私が本を見終わった時、脳の中にはすでにHTMLとCSSの概念がありました。しかしそれでも全然慣れていなくて書けません。そこでまた同僚に助けを求めると、彼らはcode cademyを登録すればいいと言いました!これはひとつのオンラインでHTMLとCSSのカリキュラムを学ぶプラットフォームです。(その他のプログラムの言語を学習することができるものもある)教育カリキュラムでインタラクティブ方法を通して初心者を導く学習で、観念を更に明らかにさせます。カリキュラムの完成進度が100%となった時、一人前になります(う~)。
▲写真元:www.codecademy.com
カリキュラム完成後、筆者の記憶に深く残っていることは、更に熟練するために良いウェブサイトをいくつか探して、モデルを図に切ってHTMLとCSSでそっくりなウェブサイトを作ってみました。その時最初に模写したウェブサイトがGoogle Playのトップページでした。GoogleのHTMLとCSSの構築と観念が学びに値すると思ったからです。
▲写真元:Google Play
実際Google Playのトップページを切り抜きして練習している時、観念を熟知していない箇所が次々と出てきて、この時筆者は自分で関連した書籍を読み観念をきちんと整理すると同時に、w3schoolに重ねて観念を補足しました。
▲写真元:w3school
初めて切り取ったときに遭遇した問題は配置(position)と回り込み(float)の応用で、多分この2つのCSS propertyは比較的想像しにくいため、やりながら学び(trial and error)ました。そのため自分自身にテーマを与え、先に述べたGoogle Playの画面を2種類のバージョンで書きました:
下のappはすべてfloatで現れます
下のappはすべてpositionで現れます
このような練習を通して、ゆっくりとposition / floatを使うタイミングを理解でき、更にこの2つのCSS propertyの使用上で注意すべき箇所がよくわかりました。以上の基礎観念を学び終わった後は、自分のスタティック・ホームページを作成する上で大きな問題ではないでしょう!
次回の予告ですが、会談のポイントは、IEhack、優化CSS(SASS/csssprite/imagecompression)、CSSFramework(Bootstrap)とバージョン管理(git)です。P.S. 次回は絶対に技術内容ではないよ(筆者の専門ではない)”
作者紹介
設計大舌頭 /Jeremy Lin
設計大舌頭は、ユーザーの経験に関する議題に注目するコンテンツプラットフォームで、ユーザーのインターフェイス、インタラクティブデザイン、ユーザーの経験、製品設計の傾向およびデザインのサービスなど、もっと多くの読者にデザイナー達の巧みな構想を理解してもらい、design thinkingの思考を広めます。