ウェブデザイナーとは？知っておくべき情報のまとめ

あなたが見ているそのウェブサイトの印象はどうですか？リンクやボタン、そして魅惑的な色を楽しんでいますか？また、読みやすい書体ですか？

これらはすべてウェブデザイナーの仕事で、あなたが毎日見ているような洗練されたウェブサイトを実現しています。

ウェブサイトの挙動やスクロールの仕方、ビジュアルから受ける印象などは、ウェブデザイナーの直感やデザイン経験、色彩理論、タイポグラフィの選択など、ビジュアルデザインの芸術性に裏打ちされています。

一方ウェブ開発者は、コードやスクリプトなど、ウェブサイトのインフラを構築・管理します。

ウェブデザイナーは、ウェブ開発者と協力して、デスクトップ、ラップトップ、タブレット、スマートフォンなど、あらゆるデバイスに対応したウェブサイトを制作します。創造性とデザイン原則の知識を駆使して、ウェブサイトを訪れる人の記憶に残るユーザー体験を創造するとともに、パフォーマンスと成果を重視したウェブサイトを構築します。

ウェブデザインのスキルを伸ばしたいなら、UXPinを使って実験を始めましょう。UXPinは、ワイヤーフレーム作成からハイファイプロトタイピングまで、あなたをサポートするデザインツールです。今すぐUXPinの無料トライアルに登録してください。

ウェブデザイナー とは？

ウェブデザイナーは、ビジネスの成果を促進することを最終目標とする美学の専門家です。デザイナーが影響を与える目標は、通常、リードジェネレーション、サインアップへの転換、ブランド認知度、新規顧客などです。

ウェブデザイナーは、これらの目標を達成するために、さまざまなスキルを持っています。これらのスキルには以下のようなものがあります。

• グラフィックアート（画像、ロゴ、図など）
• ページデザイン（ウェブページのレイアウト）
• プロダクトデザイン（オンボーディングフロー、フォームデザイン、機能性） 
• 消費者行動研究（消費者が実際に製品にどのように反応するか）
• UX/UIのリサーチとデザイン
• ビジネスゴールの報告
• ビジネスゴールの計画

ウェブデザイナー はどのようなスキルを持っているのでしょうか？

より詳細なレベルでは、デザイナーが扱う、より焦点を絞ったスキルです。

• デザインの原則 
• ウェブデザイン言語（HTML、CSS、およびJavaScriptの知識）。ウェブデザイナーの中には、Python、Ruby、Reactなどのウェブ開発言語の習得を目指す人もいます。
• タイポグラフィ 
• 色彩理論 
• グラフィック構成 
• レスポンシブデザイン
• ユーザーエクスペリエンス（UX）デザインの原則
• ユーザーインターフェース(UI)デザインの原則
• デザイン戦略
• デザイナーの日常生活では、必要なスキルセットとそれに伴う責任は、基本的なものをはるかに超えています。

デザイナーがどのように考えているのかを知るために、Jacobの法則についての資料をご覧ください。このサイトでは、UXデザインやUIデザインなどの情報をまとめています。 

ウェブデザイナー のKPIは何ですか？

デザイナーがどのようなKPIを使うかは、その戦略によって異なります。しかし、デザイナーが仕事で行う代表的な測定値は以下の通りです。

• ウェブページの訪問者からリードへの転換率
• ページ上でのエンゲージメント（ボタンのクリックやダウンロードなど）
• クリックスルー率
• ブランド認知度スコア（様々な方法で測定）
• サイト内でのユーザーの行動（ページビューファネルで測定）
• ページ滞在時間
• ビデオの視聴時間
• スクロールの深さ(hotjarなどのヒートマップツールで測定) 

ウェブデザイナー はどのような ツール を使うのか？

ウェブデザイナーは、メモ帳からUXPinのようなコードベースのデザインツールまで、UXPin含めさまざまなツールを使用して作業を行います。

主に、ウェブデザイナーとその使用するツールは、ワークフローの要件、ニーズ、スキル、担当するプロジェクトに基づいて、ウェブデザイナー自身と同じように多様で個性的です。

ウェブデザイナーの中には、特定のCMSシステムやプラットフォームに特化する人もいます。そのため、使用するツールやワークフローも変わってきます。

ここでは、デザイナーがプロジェクトやワークフローで使用するウェブデザインツールをいくつか紹介します。

デザイン思考ツール（コンセプト作成、ビジュアライゼーション、モックアップ用） 

デザインは進化のプロセスです。コンセプトやプロトタイプから始まり、ユーザーからのフィードバックを経て、最終的なプロトタイプのバージョンに反映させていきます。これは、お客様が実際に製品をどのように使用しているかに基づいて再構築する必要がある、反復的なプロセスです。

デザイン思考のフェーズについて詳しく知りたい方は、デザイン思考ツールの記事をご覧ください。

そしてウェブデザイナーはもっと機能的でパワフルなものを必要としています。

SurveyMonkey のコンセプトテスト

ウェブデザイナーのために特別に作られたテンプレートを使って、SurveyMonkeyはアンケートや投票を行い、顧客のニーズやユーザーの満足度などについて、迅速かつ明確なフィードバックを収集することができます。

Typeform

より詳細な管理が必要な場合やフォームに個性を加えたい場合は、Typeformをご利用ください。

VideoAsk

もっとエンゲージメントを高めたい場合は視聴者と直接会って、フィードバックを集めたり、質問をしたりするのはどうでしょうか？TypeformのVideoAskではビデオを使って質問をし、1つのリンクを共有するだけで回答を得ることができます。また、条件付きロジックや複数回答フィールドなども利用できます。

ワイヤーフレームからHi-Fiプロトタイピングまで、ウェブデザインのための ツール 

ウェブデザイナーが質問をしてインサイトを収集した後は、コンセプトをより具体的なものにする時です。実際にウェブサイトを構築するのはまだ先のことなので、プロトタイピングはウェブデザインのコンセプトに命を吹き込むための中間的なプロセスとして必要です。

UXPin

UXPinはウェブサイトのプロトタイピングツールで、デザインを作るだけでなく、高度なインタラクション、ステート、コンディションを使って、デザインがどのように作用し機能するかを確認することができます。

開発者のライブラリから既存のコンポーネントを引き出して、プロトタイプに簡単に組み込むことができます。これにより、あなたと開発者の時間を大幅に節約できるだけでなく、一貫性を保つことができます。

プロトタイピングツールを理解する一番の方法は、UXPinの無料トライアルに登録して、実験を始めることです。

その他のCMS専用ツールとワークフロー

ウェブデザイナーとして、特定のCMSシステムに傾倒している場合、ウェブデザインツールの選択も変わってきます。

コンセプト、ワイヤーフレーム、モックアップ、プロトタイプ、デザインの反復などにはUXPinのようなツールを使うことになるでしょう。しかし、ウェブデザインプロジェクトを完成させるために、プラットフォーム自体に組み込まれた特定のツールや機能が必要になることもあります。

WordPressのような人気の高いCMSソリューションと、Webflowのようなデザインソリューションでは、若干異なる経路やワークフローが必要になるかもしれません。 

ウェブデザイナーとウェブデベロッパー、その違いは何ですか？

ウェブデザイナーと「ウェブサイト開発者」という言葉を同じように使う人がいます。しかし、ウェブ開発チームの中では全く異なる役割を担っています。

ウェブデザイナーは、ビジュアルデザイン、UX、UI、ブランディング、コンテンツとデザインの関わり方、製品のユーザー体験などに焦点を当てます。

一方ウェブ開発者は、”ボンネットの中 “に焦点を当てます。ウェブ開発者は、コードを使ってサイトを構築し、サイトが高速にレンダリングされ、常にライブで表示されるようにすることに注力します。

ウェブデザイナーの中には、ウェブ開発者になる人もいます。また、ウェブ開発者の中には、ウェブデザインにも手を染める人もいます。

この2つのキャリアトラックの間には、豊かで多様な相互作用がありますが、あまりにも多くの仕事があるため、通常は「ウェブデザイナー」と「ウェブデベロッパー」の間で仕事が分けられています。

優れたウェブデザインの例

優れたウェブデザインの例やインスピレーションをお探しですか？ 

ここでは、私たちのお気に入りの素晴らしいデザイン例をいくつかご紹介します。

Chili Piper

Chili Piperのホームページには大きくて紛れもない、唯一のコールトゥアクションがあることに気付きましたか？エンドユーザーに価値を提供しつつ、リードを生み出すように作られています。

CTA自体は魅力的で、シンプル（ただメールを送るだけ）で、30秒でInstant Inbound™ Previewを約束しています。

また、きれいなナビゲーションメニュー、使用されている色、コントラスト、そしてナビゲーションメニューの右上にある明確なコールトゥアクションボタンにも注目してください。

ThoughtSpot

シンプルなナビゲーションメニューは、単なるメニュー以上のものになり得るか？ThoughtSpotでは、通常のウェブサイトで見られるナビゲーションメニューの機能を超えて、電子書籍のダウンロードをナビメニューの中に入れました。つまり、このナビバーはただのナビバーであるにもかかわらず、コンバージョンを獲得しているのです。

また、目を見張るような墓石のグラフィックや、「死」という言葉を使った派手なコンテンツトピックもチェックしてみてください。

ThoughtSpotは、最新のデータスタックに対応した分析ソリューションを企業に提供するSaaSプラットフォームです。当社のUXPinマルチレベルドロップダウンエレメントで実現できました。

Trivago

UXPinでは、ミニマルで結果重視のデザインが大好きです。Trivagoはあなたがよく知っているホテルアグリゲーターです。

このミニマルなホームページからすべてが始まります。このサイトの中心にある「Search」という要素に比べて、他の要素が少し色あせて見えることに気がつきましたか？

このサイトには焦点があります。このサイトには集中力があり、”ひとつのこと “だけをきちんとやろうとしています。一方で、これらのロゴは社会的な証明として機能するだけでなく、（情報を比較して提供するために）どこから物件を調達しているかを明確に示しています。

インタラクティブなウェブデザインの例をご覧になりたい方は こちらをご覧ください。

歴史上の偉大なウェブデザイナーは誰か？

印象的な仕事をするウェブデザイナーは何千人もいます。AwwwardsやBehanceなどの特定のサイトを見るだけで、最高のウェブデザイナーをチェックすることができます。

ありがたいことに、優れたウェブデザイナーの中には、自分の作品を世界に向けて公開している人もいます。ここでは、私たちが知っている最も偉大なウェブデザイナーをご紹介します。

Berners-Lee:

HTMLを発明し、ウェブ上の最初のウェブサイトのひとつをデザインしました。欧州原子核研究機構のために作られたこのサイトは、他の研究者や研究プロジェクトなどの情報へのアクセスを配信するために、バーナーズ＝リーが作った最初のウェブサイトです。

世界初のウェブデザインといえば、世界初の検索エンジンであるAliwebも見逃せません。

Shane Mielke

シェーンは、6つの「Adobe Sites of the Day」、2つの「Awwwards」、36の「FWA Sites of the Day」、4つの「FWA Mobile Sites of the Day」、2つの「FWA Sites of the Month」、3つの「Adobe Cutting Edge Awards」を受賞している、ウェブデザイナーの中でも特に優れた人物です。

また、ShaneはA Handbook for Digital Creatives』という本も出版しています。シェーンのポートフォリオは、映画のウェブサイトのデザインに大きく傾いています。

Dan Cederholm

Dribbleの共同設立者であり、作家、基調講演者でもあるDan Cederholmは、マサチューセッツ州を拠点とするウェブデザイナーであり、標準ベースのウェブデザインで知られています。

EA（Electronic Arts）、YouTube、Microsoft、MTV、ESPN、Googleなどと仕事をしてきた彼の業績とウェブデザインのキャリア自体は、ウェブデザイナーの殿堂入りを果たすべきものです。

Jan Cavan Boulas

WordPress、WooCommerce、Tumblr、JetPackを運営・管理するAutomattic社でプロダクトデザイナーとして働くJan Cavanは、何百万人もの人々が利用する製品をデザインしています。ウェブをより良い場所にするために活動しているウェブデザイナーのリストがあれば、ヤン・カバン・ブーラスはその上位数位に入るでしょう。

彼女はいくつかのデザイン会議で講演を行い、本を出版し、主にアプリのデザインに力を入れている。

Yaron Schoen

ウェブデザインショップ「Made For Humans」の創設者であり、最近ではTwitterでデザインリードを務めているヤロンはブルックリンを拠点に、インターフェースデザインを中心に活躍するウェブデザイナーです。

ヤーロンは、他のウェブデザイナーが憧れるような印象的なクライアントのリストを持っています。ナショナルジオグラフィック、AOL、Pixable、Travelocityなど、他にも数多くのクライアントを持ち、起業家精神に溢れた彼はFloatなどのプロジェクトを立ち上げました。

まとめ

ウェブデザイナーとは何か、何をする人なのかを知ることで、ウェブデザインの学習とウェブデザインのキャリアを素晴らしいものにすることができます。また、ビジネスの目標に合わせてデザインを変えたり、適切なツールを使ったりと、学習の幅を広げていきましょう。

UXPinにサインアップして、今すぐ試してみてください。