クレジット：
Web デザインが急成長している業界であることは周知の事実です。事実上あらゆる種類のビジネスが高品質の Web サイトを必要としています。大手代理店レベルから小規模ビジネスの Web サイトを自宅で開発するフリーランサーに至るまで、チャンスはあります。
では、どうやってこのエキサイティングな分野に参入するのでしょうか? Web サイト作成の経験がほとんどない、またはまったくない場合、Web サイトを作成するのは困難な作業になる可能性があります。設計と開発には、検討すべきさまざまな手段がたくさんあります。どちらから先に行けばいいでしょうか？どのスキルセットがあなたに最適ですか?
私たちは、Web デザインの総合的な知識に不可欠ないくつかの概要を説明することを目的としています。言ってみれば、これらは出発点です。各項目の下には、学習プロセスを続けるための追加リソースがリストされています。
本題に入る前に、重要な教訓を 1 つ心に留めておいてください。それは、一夜にしてプロの Web デザイナーになることはできないということです。どの分野においても専門家レベルに達するには何年もかかります。しかし、誰もがどこかから始めるので、Web デザインの教育を始めるのに今ほど適した時期はありません。
HTMLとCSS
これらは、あなたが目にするすべての Web ページの構成要素です。はい、HTML と CSS は 2 つの異なるものですが、相互に完全に依存しています。 HTMLを理解しなければCSSを学ぶことはできません。 CSS を使用せずに HTML ウェブサイトを構築することはできません。説明しましょう:
HTML「HyperText Markup Language」の略です。 Web ページの構成要素を構成します。この言語は、ページ上のさまざまな要素を定義する「タグ」で構成されています。たとえば、テキストの段落は次のように段落タグで囲まれます。
顧客は非常に重要であり、顧客は顧客に続きます。フットボール万歳。
CSS「カスケード スタイル シート」の略です。 CSS は、ページ要素にスタイルと書式設定を追加するために使用されます。 HTML が家の枠組み (基礎、梁、レンガ) である場合、CSS はプレゼンテーション (塗装、家具、装飾) です。 CSS の記述の概念は、次のように HTML タグに定義を追加することです。
p {
色: #0000ff;
フォントサイズ: 12px;
マージン-ボトム: 18px;
}
上記の CSS コードは、すべての段落が青色のテキスト色 (カラー コード #0000ff で表される)、フォント サイズが 12 ピクセル、各段落の下に 18 ピクセルの余白があるように定義します。
追加のリソース:
W3スクール- HTML と CSS の優れたリファレンスおよび学習リソース。
W3C バリデーター- HTML と CSS をチェックして、「有効なコード」とも呼ばれるプログラミングの専門標準に準拠していることを確認するためのツール。
別のリスト- Web 標準に焦点を当てた、Web デザインに関するあらゆることについての素晴らしい Web サイト。
ネットタッツ- Web 開発チュートリアルの優れたリソース。
Web 標準に基づいた設計- Web 標準の「ゴッドファーザー」であるジェフリー ゼルドマンによって書かれた、Web デザインに関する必読書の 1 冊。
CSS 禅の庭- 楽しいと同時に素晴らしいです。 CSS を使用するだけでどのようなデザインが可能になるかを見てみましょう。
Photoshop と花火
クレジット：
あなたがデザイナー、コーダー、またはその両方であるかどうかにかかわらず、間違いなくこれらのグラフィックス プログラムのいずれかを頻繁に使用することになります。アドビフォトショップは、Web デザイン、写真編集、印刷デザインの長年のチャンピオンです。
アドビ花火Photoshop の人気の代替手段です。 Fireworks は特に Web デザインに使用することを目的としていますが、Photoshop はどちらかというと何でも屋です。
Web サイトをゼロからデザインする場合でも、他の人がデザインした Web サイトをプログラミングする任務を負っている場合でも、これらのプログラムを回避する方法を知っておく必要があります。の概念を理解する必要があります。レイヤー、選択、 そしてウェブ用に画像を保存する。
追加のリソース:
YouTube の 10 の素晴らしい Photoshop チュートリアル
PSD ツッツ- あらゆる種類のクールな Photoshop チュートリアルを備えた素晴らしいブログ。
Photoshop を使ってきれいなビジネス Web サイトをデザインする方法
PSD/HTML 変換: クリーンなビジネス Web サイトのデザインをコーディングする
Web 用のデザイン
クレジット：
多くの人にとって、Web デザインについて考えるときに最初に思い浮かぶのはプログラミングです。しかし、デザインについてはどうでしょうか？ Web の効果的なデザインはおそらくこの技術の最も重要な側面ですが、初心者には見落とされがちです。
プログラマーになることを目標にしている場合でも、デザイン原則の基本的な背景を持っていることが重要です。そうすることで、デザイナーとより効果的に関わり、共同作業を行うことができるようになります。時間をかけて読む価値のあるいくつかのトピックを次に示します。
グリッドデザイン- ページ要素を等間隔の (非表示の) グリッドに配置するプロセス。これにより、見た目の美しいデザインが実現します。
TheGridSystem.org- 優れたリソースのリスト。
960グリッドシステム- 960 ピクセル グリッドに合わせてデザインするためのデザインおよび開発ツール。
ウェブタイポグラフィー- 活字、フォント、行間隔、その他活字コンテンツの表示に関連するものを配置する技術。 Web では、さまざまな画面解像度やデザイナーのフォント提供テクノロジなど、これに影響を与える多くの要因があります。
タイプキット- Web ページでデザイナー フォントを提供するための有料フォント サービス。
使いやすさ- これは、インタラクションを促進し、サイト ナビゲーションとアクション フローを通じてユーザーを容易にするユーザー エクスペリエンスを設計するプロセスです。これは、情報アーキテクチャ (IA) およびユーザー エクスペリエンス デザイン (UX) にも関連します。以下に関連リソースをいくつか示します。
デザインのインスピレーション- すべてのデザイナーはインスピレーションを必要としています。優れた Web デザインを一覧表示して、新しい興味深いアイデアを検討できるサイトがたくさんあります。私たちのお気に入りのいくつかを以下に示します。
コンテンツ管理システム
クレジット：
Web デザインの基本原則をしっかりと理解したら、最終的には「コンテンツ管理システム」(CMS) を必要とするプロジェクトに取り組むことになります。これらのシステムは、コードを編集するのではなく、使いやすいインターフェイスを使用して Web サイトのコンテンツを管理する機能を提供します。自分でウェブサイトを運営したいクライアントのためにウェブサイトをセットアップするのに最適です。
さまざまな種類のコンテンツ管理システムから選択できます。ブログやポートフォリオ タイプの Web サイトに最適なものもあれば、電子商取引機能を提供することを目的としたものもあります。無料で使用できるものもあれば、商用製品であるものもあれば、無料と有料の両方のオプションがあるものもあります。多くの CMS システムはセルフホスト型ソリューションです。つまり、ソフトウェアを独自のサーバーにインストールします。他のものはホスト型ソリューションであり、サーバー上でコンテンツを保存および管理するために料金を支払うことを意味します。
最初はいくつかのことに焦点を当て、経験が増えるにつれてより多くのオプションを検討するのが最善です。検討することをお勧めするいくつかの項目を次に示します。
ワードプレス- 従来はブログ プラットフォームとして知られていましたが、より堅牢な CMS へと大幅に進化しました。 Mashable で次の WordPress リソースをチェックしてください。
ドルパル- WordPress の非常に人気のある代替手段。多くのカスタム コンテンツ タイプを必要とするサイトに最適です。
式エンジン- これも人気のある CMS です。 WordPress や Drupal とは異なり、ExpressionEngine はオープンソース プロジェクトではありません (使用するには料金を支払う必要があります)。
マジェント- これは電子商取引システムです。つまり、製品の管理、チェックアウト プロセス、およびショッピング Web サイトにあるその他の一般的な機能を提供します。
ショッピファイ- もう 1 つの人気のある電子商取引システム。これはホスト型ソリューションであり、すべての製品と Web サイトのファイルを Shopify のサーバーに保存するために料金を支払うことを意味します。
このリストは氷山の一角にすぎません。検討する価値のあるシステムはたくさんあります。サポート、プラグイン、その他の拡張機能を利用できる強力なコミュニティを持つものを見つけることをお勧めします。
最後のアドバイス
クレジット：
ネットワークを構築し、学習を決してやめません。 Web デザインに関わる人をフォローしてくださいツイッター。関連する RSS フィードをできるだけ多く購読してくださいウェブデザインのブログ。毎日新しいことを学んでみてください。時間が経つにつれて、すべてのピースが集まり始め、気が付くと目的地に向かって進んでいます。
Web デザインのプロフェッショナルとしての日々の仕事に非常に役立つと感じたツールのリストを残しておきます。これらをチェックすることを強くお勧めします。
ファイアバグ- 必須の FireFox 拡張機能。これを使用すると、あらゆる Web ページの HTML と CSS を検査できます。コードをその場で微調整し、コード内の編集が必要な領域を即座に特定できます。表示の問題のトラブルシューティングに最適です。
ファイルジラ- Mac および PC 用の無料 FTP クライアント。
パニックコーダ - これは私が選んだコード エディターです。 Mac専用です。ぜひお勧めします。
カラーラバーズ- 配色を参照して選択するためのサイト。
測ってみよう- 別の Firefox 拡張機能。これは、Web ページ上のピクセルを測定するのに役立ちます。ページ レイアウトの寸法を完璧にする場合に非常に便利です。
Googleアナリティクス- これは、Web サイトのトラフィックを追跡するための頼りになるツールです。
唇- このサイトは、実際のコピーが交換される前に、Web サイトをモックアップするための「Lorem Ipsum」テキスト、またはプレースホルダー テキストを生成します。
コンプファイト- Flickr 写真検索ツール。 Web デザインのモックアップで使用する画像をすばやく見つけるのに最適です。
VMWare フュージョン- Mac 上で Windows のインストールを実行できる Mac アプリケーション。これは、すべてのブラウザで Web サイトをテストするときに役立ちます (常に行うべきことです)。
Mashable のその他の開発および設計リソース:
-デザインのインスピレーションのためのトップ 10 のリソース
-方法: JavaScript を使用してピクセル花火アニメーションを作成する