ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブページ制作をマスターするために必要な6つのスキルのまとめ
ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊フォントや不規則なレイアウトなどを自由に使用できますが、Web ページには一定の制限があるため、Web デザイナーは特別な制限の下でデザインを完成させる必要があります。デザインを理解するだけでなく、デザインで良い仕事をするためには、デザインに関係のない知識も理解したり、学んだりする必要があります。

この記事を書く前に整理しましたが、非プロの Web デザイナーのスキル以外のスキルをすべてリストアップしようとすると、おばあさんが地図を見ているようなものになり、これはほんの始まりに過ぎないことがわかりました。関係する範囲が広すぎます。さらに、私自身の能力にも限界があり、書き続けるうちに、Web デザイナーに求められるスキルがまだまだ足りないことに気づきます。まず、自分自身について最も重要な6つのことをリストアップし、お互いを励まし合いたいと思います。

ちなみに、紹介した本以外にも興味があれば、私が読んだ本をDoubanでチェックしてみて下さい。

1. コーディングスキル

Web ページ コードには制限があるため、Web デザイナーはデザインする前に何ができるか、何ができないかを把握する必要があります。グラフィックデザイナーとは異なり、レイアウトを自由にデザインすることはできません。それだけでなく、デザインする際には SEO に有利になるように考慮する必要があり、特定のフォントを使用して画像内に多くのテキストを表示することはできません。

コーディング スキルには、HTML コード、CSS + div、JS、アクション スクリプトなど、さまざまな側面が含まれます。以下は私の個人的な経験に基づいたコードです。

HTML: これについては説明する必要はありません。これを知らないのに、どうやって Web ページを理解したと言えるのでしょうか? 詳細については、Google でチュートリアルを検索してください。

css+div: 学習を始めた頃、何冊か本を読みました。それらと比べると、「CSS ウェブサイトレイアウト記録: Web 標準に基づくウェブサイト設計ガイド」という本の方が実用的でした。 「CSS Zen Garden」などは読む価値がありません。

actionscript: 長年の開発を経て、Flash は Web ページの非常に重要な部分になったと言わざるを得ません。 gotoAndStop()、gotoAndStop()、getURL() など、AS2 のいくつかの基本的な関数はまだ習得する必要があります。AS3 に興味がある場合は、Hei Yu の「Flash ActionScript 3 Road to Palace」を参照してください (少し複雑で、プログラミング経験のないデザイナーにとっては大きな挑戦です)。

javascript: 他に方法はありません。プログラマーに小さな JavaScript プログラムを追加してもらうのが頻繁に面倒なのは、本当に面倒です。書くことはもちろん、少なくともコードを理解して既存のコードを変更できる必要があります。

php、asp、.net: 同じことが当てはまります。あなたが社内の美しい女性プログラマーを惹きつけるハンサムな男性だと思うなら、ちょっとした変更をしてくれる女性プログラマーを探すことができます。あるいは、あなたは社内のハンサムなプログラマーを魅了できる美しい女性だと思っているかもしれません。相手が援助する気がない場合は、自立するようにしてください。

2. ユーザーエクスペリエンスを向上させる能力

海外では2000年頃からユーザーエクスペリエンスに注目が集まり始めましたが、中国では近年になってようやく普及し始めました。結局のところ、Web サイトを構築する目的は、ユーザーに評価されるインターフェースを提供することではなく、ユーザーに Web サイトを使用してもらうことです。ウェブサイトのインターフェースは美しくデザインされていますが、ユーザーがスムーズに使用するのは困難です。そうすると、ユーザーを維持することができなくなります。

ユーザー エクスペリエンスに関する書籍は数多くありますが、ここではすべてを列挙することはできません。興味のある学生は、私が以前に読んだユーザー エクスペリエンスとインタラクティブ デザインに関する本を詳しくリストした記事「私が読んだインタラクティブ ブックの要約」を読むことができます。さらに、「インタラクション デザイナーがスキルを向上させる方法」という記事も、ユーザー エクスペリエンスに興味のある学生にとって役立つはずです。

3. デザインスキルを実証する

デザイナーがデザインで顧客に感銘を与えることは否定できない。しかし、それでもデザイナーには自己表現する十分な能力が求められます。彼はクライアントにデザインを見せるだけでなく、言葉を使ってクライアントにデザインを受け入れてもらうよう説得する必要もあります。 「なぜ黒ではなく赤を使う必要があるのですか?」「競合他社のように水平レイアウトではなく垂直レイアウトを使用するのはなぜですか?」などの顧客の質問に答えます。顧客をうまく説得する方法もスキルであり、これは私の「翻訳:ユーザー、上司、顧客を説得する方法」で説明されています。

4. 顧客とのコミュニケーション能力

デザイン作業の説明が終わったら、次はクライアントとのコミュニケーションです。十分なコミュニケーションを通じてのみ、顧客のこれまで知られていなかったアイデアを深く探求することができます。なぜ人々はデザインがとても疲れると言うのでしょうか? 最終ドラフトは 1 つだけですが、繰り返し行われるコミュニケーションと修正にデザイナーの時間とエネルギーのほとんどが費やされます。ひどい拷問を受けた人もいました。

お客様と十分にコミュニケーションをとることによってのみ、修正された設計案がお客様のアイデアをよりよく満たすことができると確信しています。この方法によってのみ、顧客はあえてあなたにそれを許可し、それは顧客に対するあなたの信頼を証明することになり、修正の量がそれほど増加しないことを意味します。

単にイエスマンでいるだけでは、クライアントは自分がデザインの専門家であり、あなたはデザインを完成させるための単なる道具だと考えてしまいます。覚えておいてください: あなたはデザインの専門家です。デザインの専門家ではないクライアントからの過度なデザイン要求に盲目的に同意しないでください。そうしないと、クライアントに言いくるめられるだけでなく、ミスをした場合、クライアントが逆転してデザイナーのせいだと言う可能性もあります。これも多くのデザイナーが悩む問題だと思います。ここでは詳しくは述べません。ご興味があれば前回の記事「デザイナー力:十分な準備~デザインを承認されやすくする」をご参照ください。

5. 継続的に学習する能力

デザイン業界に十分注意していれば、人気のデザインスタイルが毎年異なることに気づくでしょう。2004 年には、単色の大きなブロックと繊細なグラデーションカラーがいたるところに見られる韓国スタイルが人気でした。 2005年以降、Web2.0スタイルが徐々に普及し、フォントサイズなどの一連のスタイルが再び人気を博しました。つまり、デザイナーは人気のデザイントレンドに常に注意を払い、トレンドを追うだけでなく、デザイントレンドから有用な要素を吸収し、自身のデザイン能力を向上させる必要があります。

一方、誰もが知っているように、インターネット技術は継続的に急速な発展を遂げています。数年前に人気だった技術を補うために、新しい技術をタイムリーに学ばなければ、数年後には能力が時代遅れになってしまうかもしれません。したがって、Web デザインには、既存のテクノロジーをある程度理解するだけでなく、再充電するための完全な学習姿勢も必要です。これは、前回の記事で「盗作 - ウェブデザイナーにとって必須のスキルの 1 つ」と触れた理由でもあります。常に盗作することで、デザインのトレンドにおいて「時代の流れに遅れを取らない」ことができます。もちろん、デザイナーの「8 つの名誉と 8 つの恥」を忘れずに、正直でいる必要があります。いくつかの画面をつかんでつなぎ合わせて、外に出て見せびらかすだけではいけません。地球は大きいと言えますが、インターネットは大きくありません。盗作がいつか発見されるという保証はありません。

6. コミュニケーション能力

諺にもあるように、「3人の善良な男が集まればギャングになる」。

デザイナーがビジュアルデザインを行うだけでなく、クライアントの Web サイトのプログラムを更新する必要がある場合 (無料のオープンソース CMS システムは多数ありますが、クライアントがコードの変更を必要とするリクエストを行うことを保証することは困難です)。このとき、コードの修正を手伝ってくれるプログラマーの友人がいることが非常に重要です。デザイナーはコードを変更するのに 2 ~ 3 時間かかる場合がありますが、他の人はわずか 10 分で変更できます。したがって、良いパートナーを持つことが重要です。

一方、競争相手は敵だと言われています。しかし、デザイナー同士の交流には影響しません。お互いにデザインの経験を交換したり、チームを組んでデザイナー1人ではできない案件を引き受けたりと、メリットがたくさんあります。また、デザインをしているイケメンや美女もたくさんいるので、お互いを知り合った後、協力関係だけでなく恋愛関係に発展しても、何も変わりません。ふふふ〜〜

もう一つ言いたいのは、業界の有名人に注目すると、このチャンネルを通じて業界の最新の動向を知ることができ、自分の能力をより早く向上させることができるということです。今ではブログやWeiboなど、さまざまなチャネルがあります。

以下の記事は私が長らく準備してきた「自分の能力に合った価格を見積もる - デザイナーの見積もり方法」ですので、ぜひ皆さんも読んでみてください。

<<:  html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

>>:  Vueのよく使われる組み込み命令の詳細な説明

推薦する

スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...

postcss-pxtorem モバイル適応の実装

コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール...

CSSでできるならJavaScriptは使わない

序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

JavaScript をスリープまたは待機させる方法

目次概要setTimeout() の確認スリープ関数の書き方シンプルな選択ループで実行されますか?要...

テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード

コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...

MySQL クエリ フィールド タイプが json の場合の 2 つのクエリ メソッド

テーブル構造は次のとおりです。 id varchar(32) 情報JSONデータ: id = 1 i...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリ...

Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...

CSS BEM 記述標準の詳細な説明

BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...

ウェブページを自動更新するための 3 つのコード

実際、この効果を実現するのは非常に簡単で、この効果は特殊効果と呼ぶことすらできません。次のコードを ...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...