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

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

@_yuheiy
@yuheiy
yuhei.yasuda1003@gmail.com

関心

マークアップはデザインプロセス

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

私の解釈ではマークアップはデザインプロセスの一部です。コンテンツの意味に向き合いながら、ウェブサイトとしての情報の表現を検証する。その反復行為の過程でHTMLは思考のフレームワークとして役立ちます。

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

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

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

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

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

CSS設計はUIパターンを形式化する

CSS設計とは、コンテンツの形式を定義し、UIパターンとして表現し、ウェブサイトのポテンシャルを具現化する行為です。CSSのための命名にはパターンとしての世界観を反映させます。

コンポーネントは階層構造を前提としません。HTMLのコンテンツカテゴリーのようにコンポーネントは性質を併せ持つものです。UIパターンの種類やドメインとの関係性に着目して、適切な汎用性を命名として表現します。

Web Componentsが実現する世界

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

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

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

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

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

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

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

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

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

プロジェクト

シフトブレイン/スタンダードデザインユニット

自社で所属しているチームのウェブサイトです。

yuhei blog

ウェブ制作の話題について書いていることが多い個人ブログです。