デザインと UI

ウェブデザインと UI には複数の幅広い領域が含まれています。どのように見えるか。どのように動作するか。 さまざまな画面サイズ、入力タイプ、端末にどのように対応するか。

レスポンシブ デザイン

モバイルでのウェブ サーフィンは劇的に増加しています。残念ながら、ウェブの多くはモバイル端末向けに最適化されていません。モバイル端末は、画面サイズによる制約を受けることが多いため、コンテンツの配置には異なるアプローチが必要です。
詳細を見る

UX の基本

快適なユーザー エクスペリエンスを実現するのは大変ですが、デザイン プロセスをより小さな単位に分割することで達成可能な目標です。 この記事では、Google のデザイン スプリント方法に基づいて、UX デザインの基本を要約しています。 詳細を見る

ユーザー入力

最近はパソコンよりもモバイルに情報を入力することが多くなっています。 モバイルでのフォーム入力は大変な作業です。ここでは、入力やタップ操作に対して直感的に、かつ美しく応答する方法について説明します。
最適なフォームの作成
サイト上でのタップ操作をサポートする

アイコンとブラウザの色

最新のブラウザでは、アイコンやアドレスバーの色の変更に加えて、カスタムタイルの追加など、コンポーネントを容易にカスタマイズできます。 こうしたシンプルな調整によって、サイトの使用頻度やリピート率が高まります。
詳細を見る

アニメーション

ユーザーは、応答性の高いインタラクティブなインターフェースを期待しています。これらのアニメーション化は簡単ではありません。 アニメーション化の対象、タイミング、アニメーションが与える印象などを考慮する必要があります。
詳細を見る

関連リソース

コードラボ

はじめてのマルチデバイス サイト
完全なレスポンシブ サイトを構築するのは、思っているほど大変ではありません。このガイドでは、レスポンシブ サイトの構築を始めるうえで必要な作業を順を追って説明します。

Chrome DevTools

Udacity コース

レスポンシブ ウェブデザインの基本
このコースでは、レスポンシブ ウェブデザインの基本を説明します。スマートフォン、タブレット、パソコンなどの端末で適切に機能する独自のレスポンシブ ウェブページを作成します。

レスポンシブ画像
このコースでは、あらゆる端末で画像を適切に表示してすばやく読み込めるように、最新のウェブで画像を操作する方法について説明します。