誰もが知っているように、すべての Web サイトのデザインには常に 2 つの側面があります。 すべてのユーザーが目にするすべてのグラフィック要素、ボタン、写真、および Web サイトの機能を担うコードであるその背後にある側面。 バランスを達成する方法は？
有効化側には、1 種類のコードだけが含まれているわけではありませんが、さまざまな種類のコードが含まれています。 まず第一に、CSS (Cascading Style Sheets) や PHP などのプログラミング言語を埋め込むためのフレームワークを作成する HTML コードです。 言い換えると、HTML はページのコンテンツを構造化するために使用され、CSS は Web サイトのコンテンツとそのスタイルを個別に扱うことができ、プログラミング言語はコンピューターに命令を伝達します。
HTML 自体は、ドロップダウン メニューやカルーセルなどの効果を強化しません。 ユーザー インターフェイス専用のコードがあり、データを処理してデータベースに接続するために他のコードが使用されます。 「プレゼンテーション レイヤー」とは、グラフィカル インターフェイスと、ドロップダウン メニューなどのインタラクティブな要素を制御するコードを含む、それを動かすコードを指します。
プレゼンテーション コードには以下が含まれます。
- HTML と HTML5
- CSS
- JavaScript、jQuery、Ajax などのスクリプト言語。
通常、視覚的に魅力的で機能性の高い Web サイト デザインを作成するために、これらすべての言語が巧みに組み合わされています。
1. マルチメディア インターフェイスの作成
アニメーション化された没入型のデザインは、Adobe Flash を使用するか、HTML、CSS、およびその他のスクリプト言語を組み合わせて使用することによって実現されます。
長年、Adobe Flash がリードしていましたが、変わり始めました。 今日、HTML 5 と CSS の開発により、インタラクティブなアニメーション効果の多くをますます複製できるようになりました。
HTML の最新版である HTML 5 は、プレゼンテーション層の設計機能に関して大きな進歩を遂げました。 要素とプロパティの改善されたツールキットを提供し、デザイナーが特定の要素を操作して使用する方法を認識します。 たとえば、デザイナーは、以前使用されていた「div」要素の代わりに、新しい「nav」を使用してナビゲーション グループを定義できます。 HTML5 のアニメーションとインタラクション デザインのサポート機能も大幅に改善され、HTML5 が Apple の Safari などのモバイル ブラウザーでサポートされているという事実により、Web デザインの可能性が開かれました。
Adobe Flash について一言
Flash は、没入感の高いインターフェイスの作成を可能にするアニメーションおよびインタラクティブ テクノロジです。 ウェブサイトのデザインにおける Flash 要素の実装に関しては、プロセスは非常に簡単です。 Adobe Flash で開発されたコンポーネントは、自己完結型の .swf ファイルとしてエクスポートされ、画像とまったく同じように、.swf ファイルは HTML ページ内に埋め込まれます。 .swf ファイルは、ページの一部にすることも、文字どおりインターフェイス全体にすることもできます。 .swf コンポーネントを含むページを表示するには、ブラウザに Flash Player がインストールされている必要があることに注意してください。
Flash を使用して印象的なユーザー エクスペリエンスを作成できるにもかかわらず、いくつかの欠点があります。 最も重要なのは、Apple モバイル プラットフォームが Flash ファイルをサポートしていないという事実です。 したがって、Flash で作成された Web サイトは、(Apple) モバイル ビューアー向けにサイトの代替バージョンを提供する必要があります (もちろん、市場が彼らにとって十分に重要である場合に限ります)。 Flash プレーヤーの最新バージョンを iPhone にダウンロードするようユーザーに勧めるボタンは、ユーザーが Flash をダウンロードしたとしてもサイトにアクセスできないため、無関係なボタンです。
HTML5 – Flash の代替
前述のように、HTML 5、CSS、jQuery コードの組み合わせにより、Flash でしかできなかった Web サイトのアニメーションを再現できるようになりました。 「canvas」要素を使用すると、リッチでアニメーション化されたユーザー インターフェイスをこれまで以上に簡単にデザインできます。 最新のデスクトップおよびモバイル ブラウザーのほとんどは HTML5 標準をサポートしており、これにより、多数のプラットフォームで機能するデザインを作成できます。
1.1 DHTML、JavaScript、jQuery、および Ajax
HTML はコンテンツの構造を形成するだけであることに注意してください。 ページに表示されるユーザー インターフェイス要素とコンテンツの動作を制御する JavaScript、Ajax、jQuery などのスクリプト言語は、その構造に織り込まれています。
JavaScript ドロップダウン メニューや拡張ウィンドウ レイヤーの作成など、複雑なアニメーションやインタラクション効果が可能な動的スクリプト言語です。 ユーザーとの対話、ブラウザの制御、表示される Web ページのコンテンツの変更を可能にします。 JavaScript が HTML に実装されると、HTML は「DHTML」と呼ばれます。 ダイナミック HTML (DHTML) を使用すると、興味深いインタラクティブなコンポーネントとアニメーションを作成できます。
jQuery は、JavaScript と HTML の間で一般的に使用される対話に焦点を当てた JavaScript の簡略化された形式です。 Web ページを簡単にナビゲートできるように設計されています。 jQuery は無料のオープンソース ソフトウェアで、オンラインで入手できます。 準備が整ったスクリプトをコピーして Web ページに貼り付け、目的に合わせてカスタマイズできます。 jQuery を使用すると、JavaScript で必要なコードよりもはるかに少ないコードで、アニメーションやインタラクション デザイン効果を作成できます。
jQuery 効果の例:
- ウィンドウに応じた展開と折りたたみ
- カルーセル画像の回転
- ロールオーバー時の画像ズームなど
アヤックス (非同期 JavaScript および XML) Web ページの表示や動作に干渉することなく、データの送信や取得などのデータ処理をバックグラウンドで (非同期に) 実行できます。 そのため、ページのリロードや「更新」ボタンのクリックは不要で、ページ上のデータは自動的に更新/更新されます。
1.2 高度な CSS グラフィック効果
以前は、ボタンなどのグラフィック要素を作成するために、jpeg や gif などのビットマップ グラフィックを使用していました。 Web ページの読み込み時間が長くなるだけでなく、Photoshop などのソフトウェアに精通したデザイナーが作成する必要があり、サイトの外観を変更するたびに手動で変更する必要があります。
現在、CSS は、要素の外観に対するスタイル制御のレベルを上げています。 コードだけでテキストや要素にグラデーション、角丸、反射、ソフト ドロップ シャドウを追加できるようになりました。
ユーザー インターフェイスを構築する際にビットマップ グラフィックスの使用を避けるために実装できる便利な CSS グラフィカル スタイル コントロールが多数あります。
ユーザー インターフェイスに CSS を使用する利点は次のとおりです。
- ダウンロード時間の短縮 – CSS コードは 1 回だけ記述され、任意のグラフィック要素またはテキスト要素にスタイルとして適用できます。
- スケーラブルなデザイン – CSS コードを使用すると、フォントや要素にスケーラブルな属性を適用できます。
- 簡単なメンテナンス – ボタン、テキスト、またはデザイン要素のサイズ、色、視覚効果を変更するには、CSS コードの値を変更するだけで、特定のスタイルに割り当てられたすべての要素に変更が適用されます。
- アクセシビリティ – CSS では、ボタンとインターフェイス要素に実際のテキストを使用しています。これらは、スクリーン リーダーがそのようなデバイスに依存するユーザーのために消化および翻訳できる方法でタグ付けおよび識別されます。
1.3 レスポンシブデザイン
最近のWebデザインのトレンドは「レスポンシブデザイン」です。 これは、最適な視聴体験を提供し、読みやすく、さまざまなデバイス間でナビゲートしやすい方法で Web サイトを作成することを目的としたアプローチです。 ユーザーがブラウザ ウィンドウのサイズを変更すると、「ビュー ポート」サイズで最適に表示されるように Web ページがすぐに更新されます。 ビューポートとは、デザイナーが使用する新しい用語で、さまざまなデスクトップ ブラウザー サイズだけでなく、固定画面サイズがすべて異なるモバイル デバイスも指します。
CSS3 仕様の「メディア クエリ」部分により、レスポンシブ デザインが可能になります。 ブラウザーのサイズを認識し、適切なスタイル シート (「widescreen.css」や「mobilescreen.css」など) を読み込むようにページに指示します。 これは、異なるスタイル シートに異なるレイアウト システム、フォント サイズ、および画像最適化設定が含まれているために可能です。
最後になりましたが、ユーザー インターフェイスの創造的なアイデアを得ることです。 オンラインにはたくさんのインスピレーションがあります。 優れた設計プラクティスを分析し、それらを本質的なものに分解し、それらのいくつかを自分の分野に適用するためにどのように適応できるかを確認することをお勧めします.