ウェブサイト運営：経験豊富なデザイナーが学ぶべきフロントエンド技術

私は、HTML と CSS を知らないユーザー エクスペリエンス デザイナーは、レンガや鉄筋に触れたことのない建築家と同じだと常に信じてきました。そのため、過去 12 件のプロジェクトでは常に戦略レベルの設計に携わってきましたが、HTML と CSS のスキルを磨くことも忘れていませんでした。実際に手を動かしてこそ、優れたデザイナーになれるのです。

最近の議論では、デザイナーと開発者がうまくやっていけない理由について議論しています。実際、答えは非常に簡単です。私と同じ人生経験がないのに、どうやって私を理解させることができるのか、ということです。ロジック、プロセス、抽象化、定義に満ちた開発者の世界では、どの部分に関わってきたかによって、開発者を十分に理解しているデザイナーであるかどうかが決まります。

そこで、私はデザイナーの言語を使って、フロントエンド テクノロジー、つまりコンピューターがデザインをコンピューター言語に変換する方法について話をしようとしました。

Photoshop を使用してインターフェイスを作成する場合、レイヤーの概念を使用して、入力ボックス、ボタン、ドロップダウン ボックスなどの要素を分離します。PSD ドキュメント内のこれらの要素がブラウザーに到達すると、フロントエンド エンジニアによって標準要素に変換されます。これらの要素の組み合わせによって、DOM 構造 (ドキュメント オブジェクト モデル) が形成されます。ブラウザーは、DOM 構造を読み取って最終的なページを生成します。

これらの要素の定義は HTML によって完成され、その見た目は CSS によって完成されます。以下の例では、CSS の変更がない DOM 構造は HTML で構成された「骨組み」だけが残っており、CSS の変更を加えた後にデザイナーが望む効果になります。

このように、デザインは HTML と CSS を使用してブラウザが読み取れるページに変換されます。デザイナーとして、上記のドロップダウン メニューに気付いた場合、このスタイルが気に入らない場合は、次のように変更することをお勧めします。

これにより、CSS レンダリングが面倒になります。CSS には限られた数のファブリックと装飾しかなく、CSS が提供できる効果を超えるものを設計すると、開発プロセスが長くなります。しかし、フロントエンド技術の発展により、完全に不可能というわけではありませんが、ブラウザは遅れをとっています。バージョンや「ブランド」が異なれば、サポートされる CSS レンダリング効果も異なります。すべてのパフォーマンスを一貫させるには、多くの時間を費やす必要があります。Mac で PS を使用すると、簡単にエフェクトを作成できます。あなたのプログラマーがあなたの陰で不平を言う理由をご存知ですか?

このようにして、静的ページを生成できます。以前はこれで十分でした。静的ページを介してバックエンドと対話できました。しかし、現在では、フロントエンドの対話動作がますます豊富になり、多くの対話がバックエンドにアクセスせずにフォアグラウンドで実行されます。

それは、蒸しパンを買って、ウェイターにキャベツは入っているか尋ねると、ウェイターはすぐに「入っていません」と答え、キッチンまで走ってシェフに尋ねる必要がないようなものです。フロントエンドのインタラクションは、パンを買うほど簡単ではありません。JavaScript によって実行される詳細なインタラクティブ動作が多数あります。これが JavaScript の重要性です。JavaScript は、これらの要素をより適切に操作し、スタイル、位置、コンテンツを変更し、必要に応じて追加および削除するのに役立ちます。

次の例は、一般的な「トップに戻る」インタラクションの詳細です。インタラクションのプロセス全体 (オンライン デモはこちら) は次のとおりです。

最初のページを下にプルします。

ボタンがゆっくりと現れました。

ページの先頭に戻るにはボタンをクリックします。

ボタンがゆっくりと消えていきます。

このインタラクションは HTML と CSS では実現できませんし、Photoshop で実現するのはもちろん不可能です。細心の注意を払うデザイナーであれば、この部分のインタラクティブな動作をドキュメントに明確に記述するか、Axure を使用してプロトタイプを作成します。ただし、フロントエンド技術を少し知っていれば、この効果を完全に書き出すことができます。フロントエンド コードは、プログラマーとコミュニケーションをとるための最も自然なツールです。同時に、アジャイル UX 環境では、デザイナーとフロントエンド開発者がペアを組んで協力し、このインタラクティブな効果を表現することを推奨しています。

以前は、この知識を習得するのは本当に困難でしたが、フロントエンド技術の発展により、いくつかの基本を習得するだけで流暢なフロントエンドコードを書くことができるようになりました。これは、HTMLとCSSのLessや960.gs、JavaScriptのjQuery、YUI、Prototypeなど、さまざまなフロントエンドフレームワークの台頭によるものです。さらに、Twitterが立ち上げたBootstrapやZurbのFoundationなど、HTML、CSS、JavaScriptを統合した統合フレームワークが増えており、デザイナーはそれらを使用して簡単に高忠実度のプロトタイプを作成できます。

これらのフレームワークの存在は、既存のフロントエンドのインタラクション パターンをコードでラップすることです。これは、パン屋でパンのセット 3 を注文するときに、どんな具材が欲しいのか、どんなお粥が欲しいのかを人に伝える必要はなく、「セット 3」と言うだけで完了するのと同じです。これらのモードには、ポップアップ ダイアログ ボックス (Dialog)、タブ (Tabs)、ドロップダウン (Dropdown)、フォーム (Forms)、リマインダー (Tooltips)、警告 (Alert)、スクロール (Scroll)、撤回 (Collapse)、カルーセル (Carousel)、ボタン (Button)、オートコンプリート (Auto Complete) などがあります。インタラクティブなシーンのデザインを完了するには、少しだけコードを記述するだけで済みます。

jQuery は、多くのフレームワークの JavaScript ベース フレームワークです。たとえば、Bootstrap の JavaScript 構文は基本的に jQuery と同じです。jQuery の基本を少し学ぶと、jQuery をより使いこなせるようになります。

jQuery 要素の 3 つの基本的なタイプ、オブジェクト、イベント、メソッドを理解する必要があります。3 つの要素の関係は次のとおりです。

オブジェクトを見つけ、特定のイベントが発生したときに、それ自体または別の要素に対して何かを実行するメソッドを見つけます。

どちらのシナリオでも、オブジェクトを見つけ、特定のイベントを決定し、メソッドを実行する必要があります。では、これら 3 つのことをそれぞれどのように行うかを見てみましょう。

オブジェクトを検索するための形式は $("objective") です。括弧はドキュメントまたは DOM 構造内の指定された要素のいずれかになります。たとえば、$(document) が定義されている場合、将来の操作の対象はドキュメント全体になります。$("#division") が定義されている場合、将来の操作の対象は division という ID を持つ要素になります。$(this) が定義されている場合、将来の操作の対象は現在の操作の対象になります。

特定のイベントの形式は event(function(){}) です。xxx はクリック、準備完了、ホバーなどです。中括弧には、自分自身または別の要素に対して実行するメソッドが入ります。前のオブジェクトと組み合わせると、$(document).ready(function(){……}) となり、ドキュメントが読み込まれたときに… を実行することを意味します。

メソッドの実行を見てみましょう。要素に対してメソッドを実行する場合の形式は .method(……) です。メソッドによって括弧内のパラメータの形式が異なります。たとえば、新しいクラス名の追加を表現するには、 .addClass("newClassName"); と記述し、前の 2 つのアクションと組み合わせると、次のようになります。

1. $(ドキュメント).ready(
2. 関数(){$( "#" ).addClass( "新しいクラス名" )}
3. );

つまり、ドキュメントの準備ができたら、 division という ID を持つ要素を見つけて、それにクラス名を追加します。

次のコードのように、このプロセスをさらに複雑にすることもできます。

1. $(ドキュメント).ready(
2. 関数（）{
3. $( "ボタン#hello" ).click(
4. 関数(){$( "body" ).append( "こんにちは!" )}
5. ）
6. ）

つまり、ドキュメントの準備ができたら、ID が hello のボタン要素を探し、この要素がクリックされたら、本文の下に Hello! という単語を追加します。

忠実度の高いプロトタイプを完成させる場合、ほとんどの場合、必要なインタラクティブな動作は、ページ要素をクリック/ホバーする、閉じる/開く/ポップアップする/別の要素のスタイルを変更する/コンテンツを変更するなどです。 jQuery の 2 つの基本的なトリガー イベントである click() と hover()、および 6 つの基本メソッドである addClass()、removeClass()、show()、hide()、append()、text()、attr() をマスターするだけで、既存の jQuery フレームワークを使用してさまざまなインタラクティブな効果を実現できます。

ボタンをクリックして非表示のレイヤーを表示するコードを完成させてみましょう。

まず、HTML を記述しましょう。ボタンと隠しテキスト フィールドが必要です。

1. <ボタン  id = "open" >テキストパッドボタンを開く>   
2. <テキストエリア  id = "テキストパッド"  スタイル= "display:none" >テキストエリア>

CSS レンダリング プロセスはここでは省略します。ボタンをクリックしてテキスト フィールドを開くコードを記述してみましょう。コードを急いで記述しないでください。まず何をしたいのかを考えてください。次のことを行う必要があります。

文書が読み取られるのを待ちます。

このボタンを見つけてください。

それをクリックします。

この隠しテキスト フィールドを見つけます。

見せてください。

それではプログラムを書き始めます。最初のステップは、ドキュメントが読み込まれるのを待つことです。

$(ドキュメント).ready(関数(){})

2 番目のステップは、このボタンを見つけることです。

1. $(document).ready(関数(){
2. $( "#open" )
3. }
4. ）

ステップ3 クリックします:

1. $(document).ready(関数(){
2. $(#open).click(関数(){})
3. }
4. ）

4 番目のステップは、ターゲットの隠しテキスト フィールドを見つけることです。

1. $(document).ready(関数(){
2. $( "#open" ).click(関数(){
3. $( "#テキストパッド" )
4. })
5. }
6. ）

5 番目のステップは、それを表示することです。

1. $(document).ready(関数(){
2. $( "#open" ).click(関数(){
3. $( "#textpad" ).show();
4. })
5. }
6. ）

jQuery には、コードに fadeIn() を追加するなど、インタラクティブな動作を詳細に設計するのに役立つ多くの特殊効果コントロールが用意されています。

1. $(document).ready(関数(){
2. $( "#open" ).click(関数(){
3. $( "#textpad" ).fadeIn( "遅い" );
4. })
5. }
6. ）

テキストパッドを開く

jQuery や他のフレームワークには、動作効果プラグインが多数あります。API を読むことで、さまざまなメソッドの使用ルールを理解することができます。基本的な考え方は、上記の簡単な例と同じです。

フロントエンド テクノロジーは、インタラクティブ デザイン以外にも非常に高度な分野です。簡単なブログですべてを網羅することは不可能です。このブログの目的は、フロントエンド テクノロジーに関する知識を少なくともある程度身に付けて、フロントエンド開発者と仕事をする機会があったときに、よりよいコミュニケーションが取れるようにすることです。

多くのインタラクションの詳細は、言葉や画像では明確に説明できません。Axure を使用すれば、この問題は多かれ少なかれ解決できますが、Axure は両方の役割で使用できるスキルではないため、開発者とのコミュニケーションを妨げることがあります。フロントエンド技術が大きく発展した今、フロントエンド技術を学んで、アイデアをコードの形で表現してみてはいかがでしょうか。

これは単なる出発点です。より多くのインタラクション デザイナーがフロントエンド テクノロジーの学習に時間を費やしてくれることを願っています。以下のリンクは、私がよく使用するフレームワークとツールです。

フロントエンドフレームワーク

jQuery – ブロガーにも使用されている人気のフレームワーク。

Bootstrap – Twitter が開発したフレームワークで、優れた UI ソリューションの完全なセット、Less の完全なサポート、さまざまなインタラクティブ モード用の完全なプラグインが含まれています。

Foundation – Zurb が作成したフロントエンド フレームワーク。完全なインタラクティブ コントロールを備えていますが、UI は Bootstrap ほど洗練されていません。

1140 Css Grid – 960.gs よりも優れた、レスポンシブ デザイン用の CSS フレームワーク。

ユーティリティ

JSFiddle – jQuery および Bootstrap フレームワークをサポートする非常に便利なオンライン HTML+CSS+JS エディター。

Pears - 非常に便利な基本的なインタラクティブ モードの HTML および CSS テンプレート。

原題: ウェブサイト運営: エクスペリエンスデザイナーが学ぶべきフロントエンド技術

キーワード: ウェブサイト、運営、経験、デザイナー、学ぶべき、少し、フロントエンド、テクノロジー、常に、信じる、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ