Content & Display Patternsを読んでモジュールの設計の仕方が少しだけみえてきました

1ヶ月以上たってしまったのですがこのエントリーの続きです。Frontend Weeklyの編集長こと@cssradarさんに教えてもらったもう1つのエントリーがDan MallさんのContent & Display Patternsというエントリーでした。こちらは特に翻訳はなかったので、まず自動翻訳を通してその後せっせと辞書引いてみたものの最終的に英語が得意な後輩に添削してもらってやっとこさ読むことができました。

Dan Mallさんはウェブサイトやウェブアプリケーションで納品後でも拡張できるデザインシステムの相談を受けることが多いそうで、TechCrunchEntertainment Weeklyのリデザインでは拡張できるモジュールの構築がゴールだったそうです(リンク先のエントリーも気になる)。これまで10のプロジェクトでBrad FrostさんのAtomic Designの考え方とPattern Labというツールを使ってプロジェクトを行ったとのことで、そこでの学びについて書かれていました。

実例としてオライリーの新しいサイトが紹介されています。このプロジェクトでは紙のワイヤーフレームを使わないことが1つのゴールで、ワイヤーフレームをつくることで実現していたコンテンツの要素を洗い出しを別の方法で行っています。このプロジェクトではコンテンツの責任者がサイトの設計としてコンテンツパターンを書きだしたスプレッドシートの例が紹介されています。Atomic Designについては日本語だと 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD の説明がわかりやすいと思うのですが、この中のテンプレートの1つ前の有機体(Organism)とその有機体の説明、コンテンツに必要な要素がスプレッドシートにまとめられていて、こうやってパーツを作っていくのかと1つの回答を見せてもらった気がします。有機体(Organism)の例として、Big Promo、More Upcoming、Local Promoはそれぞれ違う機能(内容の種類とリンク先が違う)を持っているけど、コンテンツの種類としてはどれもイベントの名前、日付、都市、イメージ(Local Promoにはない)を持っていて、コンテンツパターンは同じであることがわかります。ここからディスプレイパターンを考えるというのは確かに理にかなっていると思いました。

デザインカンプの通りそのままにコーディングすることに対する注意も書かれていて、デザイナーとフロントエンドデベロッパーがしっかりとコミュニケーションをとりながら、フロントエンドデベロッパーには工事現場で働く人ではなく、建築家として振る舞って欲しいという言葉はなかなかいいなと思いました。私自身デザイナーとしてコードを多少かけるようになりたいと思いますし、知識として知っておかないといけないと反省しました(BEMについて知らなかったので)。またPattern Labも試してみたいと思いました。

Frontend Weeklyは英語の勉強に最適

個人的な目標の1つに英語の技術情報が読めるというのがあるのですが、Frontend Weeklyで紹介されているエントリーを少しずつでも読んでみるのが一番いい勉強法な気がしました。幸い英語が得意なフロントエンドデベロッパーが社内にいるので、ただ読んで終わりじゃなくてそのあとあーだこーだ言いながらワイワイしてたのがわりと楽しかったです。ウェブデベロッパのための英語は2012年のエントリーなので、スタートをきるのに4年もかかりましたが習慣として続けていきたいです。今回のエントリーの内容を理解できるようになるまで結局1ヶ月ぐらいかかってしまったので1週間ぐらいで読めるようになるのが当面の目標かなと思います。


カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。