ウェブ開発とデザイン101

web_development_101Web開発とデザインの基本を知りたいですか?驚くばかり…


しかし、この考え方、または実際のいくつかには問題があります…

  • ウェブサイトを持つことの目的は何ですか? 誰もが本当に必要ですか?
  • もしそうなら、どうやって質の高いウェブサイトを構築しますか? または、言い換えれば、基本的なWeb開発とデザインを学んで、その質の高いWebサイトを自分で構築できるようにする方法を教えてください?
  • さらに重要なことに、最初の試行で高品質のウェブサイトを構築できますか? それとも、恐ろしい以上の結果を期待する前に、何年にもわたる経験が必要ですか?

これで全部答えましょう ウェブ開発とデザインの初心者向けガイド.

[スポイラー警告。はい、最初の試行で高品質のウェブサイトを構築できます。]

このガイドの内容?

さて、まず最初に、私たちはあなたが読み続けて、ウェブ開発を試してみることに決めたことを嬉しく思います!プレイ方法は次のとおりです。

章は非常にシンプルな方法で提示され、左側にメインのコンテンツがあり、右側に実行可能なアイテムがあります。そのようです:

ガイドの紹介:第1章

次に、続行方法:

  • あなたが最初に読んでいる間:全体を上から下に読むことをお勧めします。これにより、トピックの10,000フィートの適切なビューが得られ、トピックの最も重要な部分を理解するのに役立ちます。また、個々のタスクを処理する方法に関する基本的なツールと方法も提供します.
  • 2回目を読んでいる間に:TOCを使用して、最も興味のある部分に移動します。また、各章の横にある共有ボタンを自由に使用して、リンクを自分自身、または興味を持つ可能性のある友達/フォロワーに送信してください。.

準備はいい? 1章に行きましょう.

このガイドの対象者?

基本的なWeb開発と設計を学びたい場合は、このガイドが役立ちます。あなたの動機が何であれ.

また、開始する前に技術的な知識は必要ありません(基本的な「Webスキル」以外)。このガイドの要点は、Webサイトの構築とWeb開発の学習に興味があるすべての人のための一種の「101」コースになることです.

ここにあなたが興味を持つかもしれないいくつかの一般的な理由があります:

  • 1. あなたはあなたのビジネスのためのウェブサイトが必要です (そして、自分でそれを構築できるかどうかを確認したい).
  • 2. 情熱や一時的な興味からウェブ開発を学びたい (それについて悪いことは何もありません).
  • 3. 学校のウェブサイトが必要.
  • 4. あなたは友人や家族を助けて彼らのウェブサイトをオンラインにする.

私たちを導くことになる主なアイデア

これは重要!また、これを読んでいる上級Web開発者である場合でも、私たちに怒らないでください。しかし、このWeb開発およびデザイン101リソース全体を通して私たちを導くことになる主なアイデアは、次のとおりです。

「最小抵抗アプローチ」

最小抵抗アプローチの3つの原則は次のとおりです。

  • 私たちは 分子レベルで分解しない. つまりプログラミング言語の仕組みやWebサーバーの仕組みについては説明しません。.
  • 私たちは 車輪を再発明しない. つまり誰かが特定の問題をすでに解決し、ソリューションを利用可能にした場合、それを使用します.
  • 私たちは シンプルなソリューションを素晴らしいものにする, 複雑で一見機能的なソリューションではなく、バグが多く理解できない.

第1章:計画

あなたのアイデア、ウェブサイトの種類、ドメイン名、ホスティング.

ウェブサイトを設定する前に、計画が必要です

皮肉なことに、80年代のヒット番組「The A-Team」が教えてくれたように、良い計画は 成功の鍵.

あなたがしばらくの間あなたの中にウェブサイトを置いていたなら、あなたは確かに最終的に他の人が読んで閲覧するためにそれを出すという唯一のアイデアに興奮しているでしょう。.

あなたはあなたのウェブサイトを素晴らしいものにしたいのです。あなたはおそらく、ある程度それがどのように見えるかを知っています。あるいは、完璧なロゴの準備ができているかもしれません.

だが…

これは、あなたが始めるべき場所ではありません。事前に確立された期待から始める場合、これは途中で多くの混乱を招き、最後には準標準的な結果につながります.

代わりに、次のことを考えてください。

  1. あなたが持つかもしれない技術的な目標から自分を切り離してください. たとえば、ウェブサイトテクノロジーや特定のウェブサイトソフトウェアを学習するという目標のように.
  2. 主な質問を1つ自問してください。 「サイトは何のために必要ですか?」

これはあなたについてではなく、サイトの目標についてです.

あなたがあなたのウェブサイトをセットアップする前にあなた自身に尋ねる必要がある質問

  1. サイトが達成しようとしていること?
  2. サイトを通じて提示される主な「もの」は何ですか? (例:ビジネス、製品、ブログ投稿など)
  3. ウェブサイトに特別な目的はありますか? (eコマースストア、写真家のポートフォリオなど)
  4. 対象読者は誰ですか?
  5. サイトのトピックに興味があるのはなぜですか?
  6. サイトが個々のオーディエンスメンバーのために解決する痛み?

最後の3つの質問について、視聴者に少し話してみましょう…

ウェブサイト構築には2つの主要なルールがあります。ここにルール#1があります

 読者/訪問者が最初に来ます。彼らはあなたのウェブサイトが喜ばなければならない主要な人物です.

ある意味、あなたのウェブサイトはあなたのものではありません。それは彼らのものです.

(ルール2については後で説明します)。

この簡単なガイドラインを忘れると、完全に間違った方法につながる可能性があります。それは、周りの誰もが混乱しているWebサイトに気付くまでです。.

「うーん!このサイトの内容が理解されていないだけです。彼らはどうしてそんなに無知なのでしょうか?!」 –考えてしまう。しかし、結局のところ、無知なのはあなたでした.

それを回避する唯一の方法は、最初から読者を念頭に置いてウェブサイトを構築することです.

だから…その紙を取り、上記のすべての質問に答えてください.

完了すると、Webサイトでの作業中に実行する最終的なガイドラインのセットが得られます.

あなたが進むにつれて、それらの答えは非常に強力なツールになります。ウェブサイトに関する決定に直面したときはいつでも、彼らに戻ることができます。.

*これ*または*それ*する必要がありますか?解答用紙にアクセスして調べてください。幅の広いサイドバーまたは幅の狭いサイドバーを使用する必要がありますか回答に移動し、対象読者と共鳴する可能性が高いものを見つけます。や。。など.

ドメイン名とウェブホスティング

ウェブサイトの所有者になりたい場合は、ドメイン名とウェブホストが必要です.

まあ、技術的に言えば、自分のコンピューターですべてテストWebサイトを構築し、ローカルWebサーバー(コンピューターにソフトウェアとしてもインストールされている)から実行できますが、99%のソリューションとしては使えません。ケースなので、スキップしてみましょう.

つまり、ホストとドメイン…

ここでの悪いニュースは、両方ともお金がかかるということです.

良い知らせ…それは物事の壮大な計画においてそれほど多くのお金ではありません。さらに、学習しながら、単一のドメイン名で単一のWebホストの下で複数の小さなWebサイトを起動することもできます.

しかし、最初から始めましょう.

ウェブホスト:

  • 簡単に言えば、ウェブホストはあなたのウェブサイトが置かれ、あなたの訪問者がそれを見つけることができる場所です。ある意味で、ウェブサイトのウェブホストは人間のアパートのようなものです。内部的には、Webホストはお金と引き換えにサーバーを貸し出す会社です(…Webサイト用の小さなアパート).
  • 開始するには、標準の共有ホスティングプランを使用します。月額3ドルから購入できます。以下は、人気のあるWebホストの優れた比較です。確認して、どちらの企業があなたにぴったりかを判断してください。ただし、推奨事項はSiteGround、A2 Hosting、Dreamhostです。.

ドメイン:

  • Webホストがアパートメントの場合、ドメインはそのアパートメントのアドレスです。たとえば、このWebサイトのドメインはhostingfacts.comです。.
  • 開始するには、目的のドメイン名を選択して、レジストラから購入します。ドメイン名の購入方法に関する包括的なガイドと、ドメイン名ジェネレータのリストを以下に示します.

 

ドメイン名を選択するための提案とヒント

さて、ドメインレジストラに行って実際にドメインを購入することは1つのことですが、正しいドメイン名をどのように選択しますか?

いくつかの学校があります:

  • ブランドドメイン名. それらは存在しない単語で構成されるドメインです。 Google.comやYahoo.comなどを考えてみてください。それらの企業が登場する前は、それらの言葉は何の意味もありませんでした。ブランドドメイン名の利点は、それが…ブランド性が高く、覚えやすく、他のサイトと簡単に区別できることです。.
  • キーワードベースの名前. それらは、サイトの目的を説明するシーケンスに配置された既存の単語で構成されています。 Pizza.comやStartBloggingOnline.comなどを考えてみてください。このようなドメイン名を使用すると、訪問者は、これから訪問するWebサイトの種類を正確に予測できます。欠点は、これらのドメインは一般にブランド性が低いことです.
  • 結合された名前. これらは、ブランドドメインとキーワードベースのドメインを組み合わせたものです。 Facebook、com、またはCopyblogger.comを検討してください。そのような名前は、訪問者にWebサイトの性質の「一部」の部分を示唆しますが、それでもブランド性は高いです.

選択したドメインタイプに関係なく、いくつかの一般的なガイドライン:

  • ドメインを覚えやすくする.
  • 短くシンプルにする. ドメインが長いほど、混乱しやすくなります.
  • .comを入手する(可能な場合). .comは、利用可能なメインの「トップレベルドメイン」です。他のことで我慢しない.
  • ハイフンを避けてください. 「cake-recipes.com」の代わりに「cakerecipes.com」のような単一のブロブ形式で名前を取得します

この章の後に準備するもの:

  • ドメイン名.
  • ウェブホスト.
  • 回答のシート–サイトの目標とそれがユーザーにどのように役立つか.

もっと助けが必要ですか?これはあなたのためのさらなる読書です:

  • なぜ共有ホスティング?比較される主なタイプのホスト
  • ウェブホストを良くする10のこと
  • 適切なドメイン名を選択するための12のルール
  • 包括的なウェブサイト計画ガイド

第2章:設計とワイヤーフレーム

紙とペンを取り、あなたのウェブサイトの構造と一緒にスクラッチ

では、設計フェーズに入りましょう.

まず最初に、これから私たちがこれから通じる労働倫理を示します。

  • 私たちは可能な限りペンと紙を使用しており、その後で初めてコンピュータに切り替えます。私たちを信じて、紙の上であなたのデザインに費やす時間は、コンピューターで調整を始めてから1時間節約されます。.
  • 私たちは繰り返し作業をしています…私たちはします»結果を確認します»改善します»結果を確認します»完了するまで繰り返します.

第1章では、ウェブサイト構築のルール#1と呼ばれるものについて言及しました。今こそルール#2の時です:

ウェブサイト構築のルール#2:

最初にコンテンツを考える.

コンテンツはウェブサイトで重要なものです。デザインではありません。コンテンツ.

人々はコンテンツを求めてやって来ます。彼らはデザインのために来るのではありません。デザインはコンテンツを配信するための手段にすぎません.

あなたのウェブサイトがどのように見えるかから始めないでください。コンテンツから始めます。コンテンツ。コンテンツ。コンテンツ.

では、「コンテンツ」とはどういう意味ですか?要するに、それは人々があなたのウェブサイトから取得したいものです。ブログの投稿、ストア内の商品、フォーラムを構築している場合のフォーラムスレッド、ニュース記事、ビジネスオファーなど.

“本当に?見た目は本当に重要ではないのですか?」 – あなたが尋ねる.

私たちがこれを打ち負かす代わりに、このページをチェックしてください:

シンプルなウェブサイト

このシンプルなWebページは、デザインとは何か、オンラインでの目的の説明としては最も優れています。.

最初にコンテンツを覚えておいてください!

ウェブサイトのコンテンツと構造

さて、コンテンツは最も重要なものなので、事前に準備しておく必要があります。または、少なくとも、コンテンツの量と形式を把握する必要があります。.

注意。この部分は難しい場合があることを知っています。コンテンツから始めることは、ウェブサイトのデザインにとってはかなり不自然に思えますが、それは最終的に素晴らしい結果を得る最良の方法です。読者と共有したいコンテンツとそれをどのように提示したいかを考えてください.

次のステップは、必要となる個々のタイプのページ(ホームページ、製品ページ、カテゴリーページ、概要ページ、連絡先ページ、メインの販売ページ、ニュースレター購読のランディングページなど)を選び出すことです。メインのブログリスト、個々の投稿、おそらくストア、その他必要なものすべて).

ウェブサイトでコンテンツを整理する最も効果的な方法は何ですか?

これらすべてを紙で行います。チャート描画ソフトウェアをその場で習得するよりも、簡単で速くなるでしょう。.

例:

コンテンツ構造

ワイヤーフレームをスクラッチ

Webデザインのワイヤーフレームは、単にページの概略図または青写真です。これは、Webサイトのフレームワークを表すビジュアルガイドです(Wikipediaによると).

ワイヤーフレームは素晴らしいです!私たちは、オンラインで表示されることを目的とするほとんどのことのためにそれらを使用します。たとえば、このガイドのワイヤーフレームは次のとおりです。

ワイヤーフレームを一緒に引っかく

ご覧のとおり、これも紙に書かれています。この種の作業には複数のアプリがありますが、実際にそれらを使用することはお勧めしません。彼らはプロのデザイナーにとっては素晴らしいかもしれませんが、初心者や中級者はそれらを学ぶ時間を失うだけであり、結局、ペンと紙を通して達成することについてはあまり改善されません。.

だから、どのようにワイヤーフレーム?

さて、あなたが初心者なら、2つのアプローチがあります:

  • 強く感じている場合は流れに沿って進み、目をそらしてください(常に完全な解決策とは限りません).
  • 適切にワイヤーフレームを作成する方法についての簡単な知識を得る(通常はより良い).

後者については、こちらにアクセスしてください–優れたガイド.

(前のステップでリストしたすべての重要なタイプのページのワイヤーフレームを作成してください。)

この章の後に準備するもの:

  • サイトのほとんどのコンテンツ、または少なくともほとんどの予測(たとえば、ユーザーが作成したコンテンツに依存している場合、事前にそれを用意することは困難です).
  • グラフとして作成されたウェブサイトのコンテンツ構造.
  • 必要になる個々のタイプのページのワイヤーフレーム.

参考文献:

  • Webサイトのコンテンツを計画するための9つのステップ
  • Webデザインは初めてですか?ここから始める.

第3章:UXとUI

ユーザーエクスペリエンスとユーザーインターフェイスの重要性を過小評価しない

同様に、ユーザーエクスペリエンスとユーザーインターフェース.

WebDesignerDepotは、次の2つの詩的な定義を提供します。

UIはサドル、あぶみ、統治です.

UXは、馬に乗ったり、牛にロープをかけたりできる感覚です。.

より実用的な定義のために:

  • UIは、ユーザーがサイトを見たときに表示されるものです.
  • UXは彼らがそれについてどう感じているか.

ペアとその実行方法は、基本的に、エンドユーザー/訪問者にとってのウェブサイトの有用性を定義します.

UXとUIのデザインはどちらも大きなトピックであり、最終結果で役割を果たす小さな要素がたくさんあります。.

つまり、旅を始めたばかりの場合、学ぶべきことがたくさんあります。.

そこで、ここではUXとUIのデザインコース全体を狭めるのではなく、いくつかの重要な要素を指摘し、別の場所に送ってさらに読んでもらいます。.

ユーザーの目標

UXはユーザーの目標に関するものです…それほど多くの目標ではありません…ユーザーの目標.

さて、これはどういう意味ですか?まず最初に、あなたのウェブサイトの目的に戻りましょう-前の章で取り組んだことです。ウェブサイトを作成する理由と、それがユーザー/訪問者にどのように役立つか.

訪問者の目標にどのように変換されますか? …訪問者がサイトにアクセスしたときに取得または達成したいことは何ですか。それが彼らの目標です.

これらの目標の達成はどれほど簡単か?

次に、次の質問に焦点を当てます。

  • 訪問者は簡単に目標を達成できますか? –簡単な方法で、入手した正確な情報を入手できるか?

これに答えるには、ワイヤーフレーム、コンテンツ構造に戻って、物事を再確認する必要があります.

考えたコンテンツ構造とページが、ユーザーの視点から理解できるものであることを確認してください。重要なページ間を自由に、混乱しない方法で移動できることを確認してください.

基本的に、ここでは、ウェブサイトが訪問者に価値を提供していることを確認しています.

これを自分で理解するのは難しいですよね?

この章の「参考資料」セクションにリストされているリソースを確認することを強くお勧めしますが、いわば「ハック」を試すこともできます。.

つまり、構築したいWebサイトに似たWebサイトにアクセスしたときに、どのように不満を感じるのでしょうか。たどり着くのが難しい情報や、サイトを混乱させるインターフェース要素があるかもしれません.

メモを取り、結論を導き出し、ウェブサイトで同じ過ちを犯さないでください.

ツールとしての感情の使用

サイトのUIとUXで作業するとき、基本的に目指しているのは、訪問者に特定の感情を呼び起こすことです.

あなたは彼らに特定の方法で感じてもらい、それから彼らに特定の方法で行動するように説得します。したがって、あなたのウェブサイトを本当に役立つものにする.

仕事の感情的な部分に取り組むために、最高のツールの1つは色です.

色は文化によって意味が異なります。これらの違いを理解すると、作業がはるかに簡単になります。これは素晴らしいチートシートです.

(おそらく)使用したい色を決めたら、色を扱う際の一般的なガイドラインをいくつか示します。

  • うまく調和する2、3の色からなるメインの配色を1つ選びます。こちらが優れた配色ジェネレータです.
  • アクセントカラーとなる1つの色を選択します。これは、アクションボタン、購入ボタンなどに使用される色です。基本的に、ユーザーの注意を必要とするすべての色.

タイポグラフィ

多くの場合、タイポグラフィはウェブサイト構築のゲームに勝つ(または負ける)場所です.

タイポグラフィを完全に忘れて、すべてにArialを使用するのはとても簡単です.

非推奨.

最近では、カスタムフォントの操作は非常に簡単で、サイトでこれらのカスタムフォントを有効にするために技術的なことをする必要すらありません。.

大規模で壮大なタイポグラフィは最近非常に流行しており、デザイナーの作業、特に初心者のデザイナーの作業をはるかに簡単にします.

たとえば、このサイトをチェックしてください。

ボノボ

何か気づいた?うん、フォントは巨大で、見栄えが良い!

これに対処する方法は次のとおりです。

  • 一般に、すべてのWebサイトのデザインには2種類のテキストが必要です。 見出し そして 段落. ほとんどの場合、フォントごとに1つのフォントで十分です.
  • Googleフォントにアクセス–ウェブサイトで使用できるGoogle独自の無料フォントライブラリ–本当に楽しめる見出しフォントを探してください.
  • 次に、そのフォントの名前を取り、フォントペアで探します。これは、一緒に使用できる既製のフォントペアのライブラリです。.
  • 素敵に見えるペアリングを選んでください.
  • 両方のフォントの名前を書き留めます。後で必要になります。.

この方法で行うと、プロセスが高速化され、優れた結果が得られます.

例として、Google FontsでBree Serifというフォントを見つけました。

ブリーセリフ

次に、それをFont Pairに持ち込み、Bree SerifがOpen Sansにうまく対応することがサイトから提案されました。パーフェクト:

ブリーセリフオープンサン

最終的な構造

最後に、最後のステップ!

この章の要点は、サイトで使用する最終的なレイアウト/構造に着地することです。この時点で、デザインとUIで何をしたいかについてはほぼ確実です。.

この章の後に準備するもの:

  • ユーザーの目標が明確にリストされている.
  • ワイヤーフレームを再確認して、それらの目標が混乱しないようにします.
  • 選択した配色.
  • タイポグラフィは考え出した.
  • Webサイトのサイト全体のレイアウト/構造/構成.

参考文献: 

  • UXマガジン
  • UXブース
  • ウェブデザインにおける色の背後にある心理学と感情
  • ユーザーエクスペリエンスデザインとは何ですか?概要、ツール、リソース
  • Webサイトのスマートビジネス目標の設定
  • 効果的なタイポグラフィを作成するための8つのルール

第4章:WordPress、HTML、またはテンプレート?

進むべきルートを決定する-コンテンツ管理システムまたはそれを最初からコーディングする

ここからが本当の、手が汚れて、内部での作業です。!

これはおそらくプロセスの最も恐ろしい部分でもあります(認めます!).

とりあえず、今はペンと紙をわきに置いて、いくつかのソフトウェアで作業を始めるのに最適な時期です.

そしてすぐさま、たくさんの質問があります…

  • HTMLを学ぶべきか?
  • CSSについて?
  • 既製のHTML Webサイトテンプレートでうまくいくか?
  • PHPのようなプログラミング言語を学ぶ必要がありますか?
  • 最近、WordPressがサイトを構築する方法だと聞きました.
  • Squarespace Super Bowlの広告を見ました。どうしたの?
  • これはJoomlaと呼ばれるものですか?またはDrupal?
  • どんどんどんどん.

これらすべてに対する答えは「はい」です.

ええ、そうです、それらのいずれかまたはすべてを行うことができ、どのパスを選択するかを決めるのはあなた次第です.

私たちが言おうとしていることは、ここで一番の最善のアプローチはないということです。それはすべて、Web開発にどの程度関与したいか、どのくらいのWebサイト構築の基本を学びたいか、どれだけ迅速に高品質のサイトを完成させる必要があるか、そしてどのようにカスタマイズ可能にするかによって異なります。.

これが、この章から先に進む方法です。最初, あなたを最もよく表すペルソナを選びます:

  • a) Web開発とは何か、すべての基本、Webサイトのすべての内部動作、およびWebサイトを機能させるすべてのメカニズムについて学びたい.
  • b) 煩わしい作業のほとんどを処理してくれる信頼できるWebサイトビルダーの使い方を学びたい.
  • c) どうすればいいかわかりません。自分で構築でき、適切に機能するウェブサイトが欲しい.

回答済みa)? 第5章に進む.

回答済みb)? 第6章に進む.

回答済みc)? この記事を自由にチェックして、戻ってきてください(完全なパスを選択するのに役立つはずです)。

  • 8つの最高のブログとウェブサイト構築プラットフォームのレビュー…各プラットフォームは、その長所と短所とともに説明されており、リソースは、特定のニーズに最適な選択肢(WixまたはSB)も提案しています.

読んだ?すごい!上記のどのペルソナがあなたを最もよく説明していますか a)またはb)?

途中で便利になるツール:

  • グラフィック:Paint.NET、Gimp、Pixlr.
  • コードの記述:Notepad ++、TextWrangler、SublimeText.
  • 作業管理:Trello.
  • デザイン:配色、Googleフォント、ここからのツール.
  • 写真:Unsplash、AllTheFreeStock

第5章:HTML、CSSの概要 & Javascript

Webサイトが組み込みの現実である方法

この章では、Web開発の基本を指摘し、最も重要な用語を説明してから、知識とスキルをさらに伸ばすことができる特定のリソースに移動します.

HTML

HTMLはウェブサイトの言語です。すべてのWebページは、ある時点で作成またはHTMLに変換されます.

たとえば、ここで読んでいるこのガイドのHTML構造を表示するには、キーボードの「Ctrl + U」を押すだけです.

HTMLは、Webページに表示されるすべてのブロックを定義します。結局のところ、Webページに何かを表示するには、HTMLに変換する必要があります.

HTMLを効果的に学ぶには、Webで利用できる(無料または有料)コースの1つにサインアップすることをお勧めします。最高のものは、CodeacademyまたはTreehouseにあります。.

たとえば、HTMLとCSSに関するCodeacademyの特定のセクションは次のとおりです.

CodeCademyホームページ

これがHTMLに対する包括的なアプローチです.

CSS

CSS –退屈な技術的詳細をスキップするため– Webページに表示されるすべてのスタイル設定を担当します.

CSSはHTMLタグを受け取り、構造化してスタイルを追加します。太字のテキスト、色調整、シャドウ、レイアウト、さらにはアニメーションまで、主にCSSで実行されるようになりました。.

これが正確にどのように機能するかについての理解を深めるには、Codeacademyのこのクイックコースに進んでください。.

より詳細な学習については、CodeacademyまたはTreehouseのCSSセクションも確認してください.

JavaScript、jQuery、ブートストラップなど.

JavaScriptは、Webサイトに動的アクションを導入できるプログラミング言語です。たとえば、ウェブフォームを検証したり、ページをリロードしなくても、より効率的な方法でユーザーとやり取りしたりできます。これがw3schoolsによる素晴らしいチュートリアルです.

そのことを念頭に置くと、jQueryは、少ないコーディングで高度なものを作成できるJavaScriptライブラリです。 Web開発者にとって非常に便利です。詳細はこちら.

最後に、Bootstrapは非常に興味深い発明です。もともとはTwitterによって導入されたもので、基本的にはフロントエンド環境であり、既に構築済みの一般的なサイト要素のほとんどを配信することで、ウェブサイトの構築プロセスを高速化します。複雑に聞こえますね?

しかし、そうではありません。 Codeacademyでこのスターターコースを確認してください(ちなみに、これは最初にBootstrapを学習した方法です).

この章の後に準備するもの:

  • 基本的に、HTML / CSS Webサイトの最初のドラフトは完全に構築されています。そこから、最終結果の反復と改善を開始できます.

第6章:ウェブサイト構築プラットフォーム

最初のサイトをセットアップしますか? WordPress、Joomla、Drupalなどの無料のウェブサイトプラットフォームを試す

第6章:ウェブサイト構築プラットフォーム

  • SquareSpace
  • ワードプレス
  • Joomla & Drupal

あなたが棒を振ることができるよりも多くのウェブサイトビルダーがあります。 (あなたが振るような人なら物事にこだわります。)

冗談はさておき.

明らかに、手作業でコーディングする方法を学びたいという欲求がない場合、それらは確かにあなたを助けることができる複数のソリューションです.

注意。第1〜4章で説明した他のすべてがここでも適用されることに注意してください。手作業のようなサイト構築ソリューションを使用する場合でも、最終製品をユーザーに親しみやすくし、全員の目標に合わせるように注意する必要があります。これらのサイト構築ツールはまさに…ツールです.

把握しやすいものから始めます。

SquareSpace

スーパーボウル中に宣伝する唯一のウェブサイトプラットフォーム.

つまり、誰でも使える非常に便利なソリューションです。事前のスキルは必要ありません.

それはあなたが私たちがそれらについてレビューを書いたことさえある古典的なウェブサイト、ブログ、さらにはeコマースストアを構築することを可能にします。インターフェイスとそれを使用するプロセス全体は非常に理解しやすく、さらにSquarespaceの人たちは多くの興味深いチュートリアルを提供しています。こちらでチェックしてください.

ワードプレス

正直なところ、私たちはWordPressが大好きです.

ほとんどの場合、これはWebサイトを構築するのに最適なプラットフォームです。複雑さと使いやすさの完璧なバランスがあり、基本的に無限にカスタマイズ可能です.

WordPressアニメーション

また、現在、それらの中で最も人気のあるWebサイトプラットフォームです。 WordPressの作成者– Matt Mullenweg –によって共有されているように、WordPressは現在、インターネット全体の25%を占めています。それらすべての人々が間違っている可能性があります?

WordPressを使い始めるには、基本的にはドメインとホスティングのみが必要です。 WordPressソフトウェア自体は完全に無料です.

最初に、次のいずれかの方法に従ってください。

a)「クイックスタートパス」

  • WordPressをインストールして午後にサイトを起動する簡単な方法については、こちらをご覧ください.
  • 公式ディレクトリから無料のテーマを選びます–それがサイトの目標と調和していること、およびレイアウト/デザインが希望の構造から遠くないことを確認してください(少し調整します).
    • これら2つのリソースを確認して、既存のテーマをカスタマイズする方法を学んでください。.
    • または、便利なユーザーインターフェイスから調整できる多目的のプレミアムテーマを選択することもできます(コーディングは不要)。 Xテーマはそのような良い例です.
  • 最も人気があり、最高のプラグインをいくつかインストールして、追加機能を入手します.

b)「詳細なパス」

  • オンラインコースでWordPressを学ぶことから始めます。樹上の家は素晴らしいものを提供しています.
  • 上記と同じように、テーマとプラグインを選択します。または、独自のテーマをゼロから構築する.

結局のところ、WordPressはおそらく市場で最も用途の広いWebサイトプラットフォームです。これにより、ブログや単純なビジネスサイトだけでなく、事実上あらゆるタイプのWebサイトを構築できます。以下に、WordPressの47種類(!)のさまざまな使い方のリストを示します。.

JoomlaとDrupal

JoomlaとDrupalはわずかに異なりますが、どちらもより高度なウェブプロジェクト用の優れたコンテンツ管理システムです.

それらはデザイン的にはそれほど強力ではありませんが、高度にカスタマイズ可能で、計画しているあらゆる種類のWebサイトを処理できます。.

時には、プロジェクトの複雑さによっては、習得するのにより多くの時間が必要であり、そのためにより多くの労力が必要になる場合があります.

より詳細なトレーニングについては、Lynda.comにJoomlaとDrupalの両方の素晴らしいコースがあります.

この章の後に準備するもの:

  • WordPressなどのプラットフォームを使用するかどうかに関係なく、完全に構築されたWebサイトの最初のドラフト.
  • それが最初の目標、対象となる聴衆と調和し、優れたUXを提供することを確認してください.

第7章:モバイルレスポンシブデザイン

60%以上の人が携帯電話やタブレットを使用してウェブを閲覧しています

今やモバイルの応答性は、おそらくこれまで以上に、ウェブサイト構築の非常に重要な側面です。.

問題全体は次のとおりです。

基本的に、現在、モバイルデバイスを使用してWebにアクセスする人はこれまで以上に多くなっています。実際、デスクトップインターネットユーザーよりもモバイルインターネットユーザーの方が多いと推定されています(75.1%対52.7%).

しかし、問題があります.

すべてのウェブサイトデザインがモバイルデバイスですぐに表示できるように最適化されるわけではありません.

一般的な問題には次のものがあります。

  • フォントが小さすぎる,
  • レイアウト自体が小さい画面にまったく適合しない,
  • または、モバイルで利用できないサイトの構築に使用されたテクノロジー.

これがモバイルの応答性のアイデアが出てくるところです.

レスポンシブWebサイトは、表示されている環境に応答します。デスクトップコンピューターの場合、Webサイトは特定の方法でレンダリングされます。モバイルの場合、別の方法でレンダリングされます.

より適切な説明は次のとおりです。レスポンシブウェブデザインとは?

したがって、今すべきことは、Webサイトがモバイルデバイスで機能することを確認することです。独自のデバイスを使用してこれを確認するだけでなく、Googleのモバイルテストを試すか、Responsive Design Testerなどのツールにアクセスしてください.

問題がある場合は、修正する必要があります.

いくつかの解決策:

  • レスポンシブWebデザイン–ハウツー
  • 約15分でWebサイトを応答可能にする方法

第8章:すべてをまとめる

あなたは基本を知っています、今あなたの番です

しばらくお待ちください!

これは私たちのかなり長い旅の最後の章です.

この時点で、最初のWebサイトを構築する必要があります。WordPress、自作のHTML / CSS、一部のWebサイトビルダー、またはジョブ用に選択したその他のツールを使用してください.

要するに、おめでとうございます!しかし、やるべきことはまだいくつかあります。

  • 第1章と第2章で説明したことを再確認してください。目標が実際にエンドユーザーに役立つこと、およびWebサイトが混乱しないことを確認してください.
  • W3Cのマークアップ検証サービスを通じてコード構造を検証する.
  • サイトにセキュリティ上の問題がないかどうかを確認します。 Sucuriのスキャナーを使用してください.
  • コミュニティからフィードバックを得る。他の人があなたの仕事についてどう思うかチェックしてください。 Sitepointでのフォーラムはそのために役立ちます.

それがこのリソースを初めて読む場合は、数回戻って、今後の教育の参照ファイルとして扱うことをお勧めします.

冒頭で述べたように、目次を自由に使用して、必要に応じて章から章、リソースからリソースに移動してください。.

最後に、私たちは好奇心旺盛です。Webサイトの構築、Web開発、またはデザインに関して、最大の課題は何ですか。コメントやツイッターでシェアしてください。私たちはすべて耳です!

読んでくれてありがとう、あなたは素晴らしいです!

  • 合計116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map