Web デザイナー Lingo: クライアントのためのガイド
公開: 2024-09-15すべての取引には独自の専門用語があります。 Web デザイナーは、UX、CSS、HTML などの Web サイト用語のアルファベットのスープに精通しています。しかし、あなたの顧客は?彼らにとってそれはギリシャ語でもあるかもしれません。
デザインプロセスに入る前に、最も一般的な Web デザイン用語についてクライアントを教育することには大きなメリットがあります。知識のレベルに関係なく、基本事項の説明を省略すると、仕事やデザインのアイデアについて話し合う代わりに、用語の翻訳に電話をかけることに多くの時間を費やすことになります。
クライアントに最新情報を提供できるように、最も一般的な Web デザイン用語をまとめ、クライアントにわかりやすい専門用語に翻訳しました。
ここでは、Web サイト デザインの 7 つの重要な用語を紹介します。
- ヒーローイメージ
- UX
- ワイヤーフレーム
- 情報アーキテクチャ
- モバイル対応
- HTML、CSS、JavaScript
- CMS
ヒーローイメージ
Web サイトをデザインするとき、Web サイトのホームページに関して「ヒーロー イメージ」という用語をよく耳にします。この用語はバットマンやスーパーマンのイメージを思い起こさせるかもしれませんが、デザイナーがスーパーヒーローのイメージを Web サイトに掲載しているという意味ではありません。

ヒーロー画像は、Web サイトのホームページの上部セクションにある大きな目玉画像またはビデオの背景です。この領域はサイトの非常に重要な部分であるため、人々はこの領域をヒーロー イメージと呼び始めました。これは、訪問者が Web サイトにアクセスしたときに最初に目にするものであるため、デザインは魅力的で意味のあるものである必要があります。
「ヒーロー イメージ」という用語にはイメージという言葉が含まれていますが、Web サイトのこのセクションは必ずしも静止画像である必要はありません。今日、ヒーロービデオは非常に一般的であり、通常はテキストの背後でバックグラウンドで再生されます。サイトの目標とデザイン スタイルによっては、サイトのこの領域でアニメーションが使用されている場合もあります。
UX またはユーザー エクスペリエンス
UXはユーザーエクスペリエンスの略語です。 Web デザイナーの中には、Web サイト訪問者の Web サイト全体のエクスペリエンスを向上させるプロセスである UX デザインを専門とする人もいます。 UX デザインは専門分野とみなされます。デザイナーはサイトの外観を作成するだけでなく、訪問者がサイトへの最初 (およびその後の!) 訪問時にどのような体験をするかを考慮するからです。
ユーザー エクスペリエンスを簡単に例えると、新しいレストランでのエクスペリエンスと比較することができます。食べ物は素晴らしいかもしれないが、レストランが席に着くまでに永遠に時間がかかり、バスルームがひどく、駐車場が悪夢のようであれば、おそらく再びそこに行くことを諦めるだろう。レストランでの体験に影響を与える可能性のある要因は、食べ物以外にもたくさんあります。
ウェブサイトについても同じことが言えます。それがユーザー エクスペリエンスです。訪問者を Web サイトに引きつけて維持するには、単にデザインが優れているだけではありません。 UX デザインを理解している Web デザイナーは、サイト上のすべてのものがユーザーの全体的なエクスペリエンスにどのような影響を与えるかを考慮します。
ワイヤーフレーム
ほとんどの Web サイト プロジェクトでは、Web チームはデザインのモックアップを作成する前に、まず Web ページのワイヤーフレームを作成します。
ワイヤーフレームは基本的に設計図であり、特定の要素とテキストがページ上のどこに配置されるかを示します。

Web サイトの構築は、家を建てるプロセスに似ています。建築家と協力して設計図を作成してから、インテリア デザイナーに作業を開始してもらいます。そうしないと、キッチンにバスルームが設置されてしまう可能性があります。ワイヤーフレームは、Web ストラテジストやデザイナーと協力して、デザインのモックアップよりも簡単に作業を進めることができるため、非常に便利なツールです。
ワイヤーフレームの例を見たことがある人なら、それが建物の設計図と似ていることに気づくでしょう。ワイヤーフレームは通常、要素が配置される場所を示す基本的なボックスとアウトラインを備えた白黒です。
情報アーキテクチャ (IA)
ワイヤーフレームに加えて、通常はプロセスの早い段階で Web サイトの情報アーキテクチャに取り組みます。情報アーキテクチャは、多くの場合 IA と呼ばれ、Web サイト上のコンテンツを整理、優先順位付け、ラベル付けするプロセスを指します。

この段階では、Web サイトのトップ ナビゲーションにどの Web サイト ページを含めるか、コンテンツをどのように構成するかを決定します。トップ ナビゲーションは、ページの上部にある一連のリンクです。このトップ ナビゲーションは Web サイトのすべてのページにあり、Web 訪問者を最も重要なコンテンツに誘導するのに役立ちます。
ワイヤーフレームと同様に、最終的な情報アーキテクチャは Web サイトの組織表現です。これは図のように見えることが多く、最終的な Web サイトが論理的で直感的に操作できるよう Web チームを導く重要なツールです。
モバイル対応
現在、すべての Web サイトは、携帯電話、タブレット、デスクトップ コンピューターなどのさまざまなデバイスで動作する必要があります。このような文脈で、Web デザイナーが「モバイルレスポンシブ」という用語を使用するのをよく耳にします。

WordPress などの Web サイト プラットフォームの大部分はモバイル対応です。つまり、コンテンツがユーザーのデバイス サイズに自動的に調整されるように、プラットフォーム自体にテクノロジーがすでに組み込まれています。
携帯電話がどのように機能するかを考えてみましょう。電話機を水平にすると、電話機のコンテンツが自動的に調整されます。
これはウェブサイトで起こっていることと非常によく似ています。モバイル対応テクノロジーのおかげで、Web デザイナーや開発者は、小型デバイス用に Web サイトの第 2 バージョンを作成する必要がなくなりました。同じコンテンツとデザインは、異なるデバイス サイズでも適切に表示されます。
熟練した Web デザイナーは、サイトの設計時にこれを考慮し、モバイル デバイスと大きな画面の両方で機能するコンテンツを作成できるようにガイドします。
HTML、CSS、JavaScript
これらの専門用語を聞いて怖がらないでください。それぞれは、デザインが静止画像からライブのインタラクティブな Web ページになるまでの過程に関係しています。通常、サイトの外観と構成を専門とする Web デザイナーと一緒に Web サイトの作成を開始します。次に、サイトのコーディングを行う Web 開発者または開発チームとの作業に進みます。
これらの用語はサイト構築の開発段階でよく耳にしますが、デザインに関する議論でも登場する可能性があります。
HTML はHyperText Markup Language の略で、Web チームはこれを使用して Web ブラウザにテキストの表示方法を指示できます。 HTML では、テキストが見出し、小見出し、段落のいずれであるかを示すためにさまざまなタグを使用します。デザイナーがデザイン内の見出しに H1 というラベルを付けることがあります。これは、このラベルが付いたすべてのテキストが同じフォント サイズである必要があることをブラウザーに伝えるために使用される HTML タグを指します。
カスケード スタイル シート (CSS) は、 Web デザイナーと開発者が Web サイトの外観と雰囲気を定義するのに役立ちます。 HTML 自体は魅力的でも魅力的でもありません。 CSS は、美しい Web ページのデザインを作成する上で大きな違いをもたらします。
JavaScript は、開発者が Web サイト上でインタラクションを作成するために使用するスクリプト言語です。 HTML と CSS だけで見栄えの良い Web ページが完成しますが、この 2 つだけでは何も起こりません。 Web 開発者または開発チームを探すときは、JavaScript 以外にも多くの知識がある人を探し、チームがサイトを構築しているプラットフォームの経験があることを確認してください。
CMS
最後に、コンテンツ管理システム (CMS とも呼ばれます) という非常に簡単な用語で締めくくります。この用語は、WordPress (別のコンテンツ管理システム) に関連してよく聞かれます。
実際、WordPress は世界で最も人気のあるコンテンツ管理システムです。 CMS は Web サイトのバックエンド ツールであり、これを使用すると、コンテンツを簡単に編集したり、サイトに追加したりできます。
WordPress などの CMS でサイトを構築する大きな利点は、Web サイトの公開後にテキストの変更、画像の追加、ページの追加を行うのに Web デザイナーや Web 開発者である必要がないことです。ページにカンマを追加する必要があるたびに Web 開発者に電話する必要はありません。
WordPress は非常に柔軟でカスタマイズ可能なため、ビジネスにとって管理しやすい美しい Web サイトを作成して、両方の長所を活用できます。
WordPress コンテンツをもっとチェックしてください!

WordPress は世界で最も人気のあるコンテンツ管理システムであり、毎日ますます多くのクリエイターによって使用されています。
WordPress について詳しくは、こちらをご覧ください。あなたが初心者であっても、WordPress を隅々まで知っているとしても、私たちは誰でも楽しめるリソースと記事を用意しています。
ここを読み続けてください。