安田祐平(やすだ・ゆうへい)

フロントエンドウェブ開発者。1995年生まれ。東京都在住。
株式会社シフトブレイン所属。業務では主に運用を見据えたウェブサイトの開発に携わる。

@_yuheiy
@yuheiy
yuhei.yasuda1003@gmail.com

関心

マークアップは考えるためのものさし

マークアップは後付けの作業だと思われがちです。すでに完成している画面仕様を、単にHTMLに変換するだけの行為であると理解する人は少なくありません。

私にとって、マークアップはものさしのようなものです。ひとつひとつの要素の意味からページ全体の構造に至るまで、制作者が自身の表現の意味について知り、そして考えるための視点です。デザインを「ただ見ている」とき、それはひとつの角度でしか見ていません。マークアップによってアプローチの方向を増やすことで、これまでに得られなかった発見があるはずです。

すると、マークアップはデザインとしての試行錯誤の過程であると捉えられます。言い換えれば、マークアップはデザイン作業の中に位置付けられます。具体的には、デザインツール上で作業しているときにも、常に頭の中でマークアップをすることに意味があります。HTMLはそうした思考のためのフレームワークです。

UIフレームワークとしてのHTML

HTML要素はもっともプリミティブなコンポーネントです。多くの要素は意味や振る舞いを持ち、制作者はそれらを継承する形で画面を実装します。

画面の構成要素となるパターンは、まずは基本的なHTML要素から選択できます。それらのHTML要素に対して、要素の種類ごとにスタイリングを施していくことによって、制作者の情報を構造化する意識が促されます。タイプセレクタはHTMLとCSSの模範的な関わり方を象徴しています。

ブラウザはインタラクティブコンテンツに含まれる要素をユーザーが操作できるように実装しています。操作方法は要素の種類とユーザーエージェントごとに決められており、それらの要素を採用することで操作の一貫性がウェブサイトという境界を超えて実現されます。

サイト固有のスタイルや振る舞いから見てHTMLは骨格なのです。

CSS設計には設計意図を反映させる

CSS設計とはサイトのデザインパターンを形式化することです。つまり状態の一時的な再現だけでなく、その先に変化のポテンシャルを感じられるだけの意図を反映させることです。

コンポーネントは階層構造を前提としません。HTMLのコンテンツカテゴリーのようにコンポーネントは性質を併せ持つものです。

Web Componentsが実現する世界

Web ComponentsはUIのコンポーネント化を標準の仕組みとして実現する仕様です。すでにいくつかのライブラリにはコンポーネント化の機能がありますが、標準としての採用はその民主化を意味します。コンポーネント化の発想が当たり前の世界になるために、技術的な後ろ盾となることを期待しています。

ユーザーが主体になるためのUIデザイン

良いUIとは、ユーザーが自律的に考えることができて、ユーザーの主体的な行動を促すものです。UIデザインをユーザーの利益のために、創造的な行動を制限して主導するような考え方から解放しなければなりません。

レスポンシブウェブデザインと分業

レスポンシブウェブデザインはウェブデザインを固定幅という制約から解放しました。同時に、静的なデザインカンプと本物のレンダリング結果とのギャップを浮き彫りにしました。それ以前まで、ウェブデザインは960pxであるという決めつけに囚われていました。

それにも関わらずウェブデザインは再び、スマホ用・PC用というアートボードの中に囚われています。これは分業化の結果として逃れられない現象であるとも言えます。その溝を埋めるために現実的なアプローチを探し続けなければなりません。

ウェブサイトのためのフロントエンド開発環境

フロントエンド開発ツールの話題が活発化していますが、従来からの課題であるような大量のHTMLファイルをうまく開発するための手法などはあまり語られません。ウェブサイト制作者とフロントエンド開発の流れとの溝が原因だと感じます。

ウェブサイトを変更しやすくかつ長い期間耐えうる設計をするためには、開発ツールについても多角的な視点が必要です。より良い開発環境を構築して開発効率や品質の向上に寄与します。

プロジェクト