らいちお久しぶりです。らいちです。
昨今の副業需要の増加に伴い、Web制作を学習する人も増えてきていますよね。
しかし、学習をこれから始める方や、はじめたての方にとっては、基礎知識があることを前提に「Htmlが～ワードプレスが～」と話が進んでいくので、あまり分からないままなんとなく話を進めてしまっている方も多いのではないでしょうか？
そこで今回は、いまさら聞けないことシリーズ第一弾といたしまして、コーディングやデザインとは一体何なのかなど、初心者によくありがちな疑問について解説したいと思います。
この記事を読むことで、Web制作に必要な基礎知識を簡単に学べますので、これから学習を始める方々にとっても一助になれば幸いです。
それでは始めていきましょう。
Web制作者の基礎知識編
①コーディングとは何か
まずコーディングについて解説していきましょう。
らいちコーディングとは、ざっくり言うと「プログラミング言語を使ってソースコードを書く作業のこと」です。
プログラミングとは、コンピュータにさせたいことを順番に組み立てていく作業のことであり、プログラミング言語が複数ある理由は種類によってできることが異なるからです。
そして、ソースコードとはコンピューターに対して「このように表示してくれ！」と示す指示や命令文を指します。
ブラウザ上にWebページを表示させるには、ソースコードを作成しなければどんなWebページも表示されません。
具体的には、製品やサービスの詳細が書かれている仕様書に沿って、コードを記述し、Webブラウザ上で「見える形」にしていき、様々なコードを組み合わせつつ、仕様書の通りに、文字や写真・イラストなどがWebページに表示されるよう記述していく作業をコーディングと呼ぶのです。
ざっくりと言うとコーディングとは「コンピュータにWebページを表示させるための命令書を書く作業」と認識してもらえば大丈夫です。
僕も学習を始めた当初は、なんで日本語で書けるようにしてくれないの？と思っていましたが、そもそもコンピュータは人間とは違いますし、プログラミング言語は世界共通ですので、コンピュータに命令するための言語を覚えていく、いわば外国語学習のようなものですね。
コーディングができるようになると、Webサイトやアプリ、ゲームなどの開発に携わることができるというわけです。
コーディングを学習していく上で、まず基礎的な物として、HTMLやCSSと呼ばれるものがあるので、そちらの概要もざっくりお伝えします。
②HTML、CSSとは何か？
HTMLとは「Hyper Text Markup Language」の略語です。
先ほど解説したWebページを作成するために開発された言語であり、HTMLを使うとコンピュータに「これがテキストです」「これが見出しです」といったページの構造を伝えられるわけです。
らいち要は、ただ文字を書いているのではなく、そこにリンクを紐づけして情報共有を行うネットワークを構築しているもの。といった認識で大丈夫です！
CSSとは「Cascading Style Sheets」の略語です。
Webページのスタイルを指定するための言語であり、HTMLがページの情報や構造を定義するのに対し、CSSは色やレイアウト、サイズなど見た目の装飾を定義します。
ざっくりお伝えすると上記のHTMLで書いたものをスタイリングしていく役割を持つのがCSSというわけです。
ですので、HTML/CSSとセットで語られることが多いのです。
詳しくはこちらの記事でも解説しています。
【Web制作で年収1000万円】全ての人はこれを読め！誰でも分かる初心者からディレクターまでの完全ロードマップ！
・HTML、CSSとはコーダーが学習すべき基礎的なプログラミング言語
・普段見るWebサイトは基本全てHTMLとCSSから出来ている
③Webデザインとは何か？
ではWebデザインとは何かを説明すると、Webページの見た目に関わる部分を制作することを意味する言葉です。
普段HPを閲覧すると、様々なデザインを見ることが出来ますよね？
このようなサイトを作るときに、配色を決めたり、写真や文字のレイアウトを考えたりして、視覚的に分かりやすく、サイトの目的に沿った魅力的なデザインへと仕上げていく作業のことをwebデザインと呼ぶのです。
そのデザインを作るツールとして、illustratorやPhotoshopと呼ばれるものがあります。
ですので、デザインを学習するのであれば、まずこのようなツールを使いデザインを構築できるように学んでいく必要があります。
詳しくはこちらの記事でも解説しています。
結局デザインって何が正解なの？読めば間違わない！デザインの基礎から応用まで画像で詳しく解説
・HTML、CSSを建築に例えるならコーディングは設計図から柱などの枠組みを作る作業
・デザインはその家の外観を整える作業だと考えてください
④Webサイトって何？
ではWebサイトとはそもそも何かというと、サイトのURLでよく「www」という頭文字を目にしますよね？
これは「World Wide Web」の略称です。
僕たちが日常的に使用しているインターネットは、世界各地のサーバに格納されているデータがネットワーク回線によって繋がれ、閲覧できるようになったものです。
ちなみにサーバとは、他のコンピューターの要求に応じてデータを提供するコンピューターやソフトウェアを指す言葉です。
Webサイトを構築するためには、データの置き場所であるサーバが必須になるわけです。
そしてワールドワイドウェブ（WWW）とは、コンテンツを検索、閲覧、利用できるように構築したシステムそのもののことを指します。
らいち大まかに「インターネット＝WWW」という認識で大丈夫です。
世界中に広がった情報の網をクモの巣に例え「World Wide Web（世界中に広がるクモの巣）」と名付けられたようです。
Webサイトとはこれらの仕組みを利用したページのことを指すわけです。
⑤検索エンジンとは何か？
検索エンジンもよく耳にする単語ですので説明しておきます。
インターネット（WWW）上に公開された無数のコンテンツをインデックス（収集、登録）し、テキスト検索によってユーザーが見つけやすくしたものが検索エンジンです。
検索エンジンが発達したことによって、ユーザーは求める情報を素早く正確に見つけ出すことが可能になり、インターネットの利便性は格段に向上しました。
Google、Yahoo!などに代表される現在の主要な検索エンジンは、プログラムによって自動でWebコンテンツを収集し、独自のアルゴリズムによってコンテンツを評価し、検索結果に表示させるという仕組みです。
⑥SEOとは？
そして、この検索エンジンで上位表示され、より多くのユーザーにサイトを閲覧してもらうための施策のことをSEO「Search Engine Optimization」対策と言います。
閲覧されないサイトに存在意義はありません。
なぜならば、多くのサイトは集客・見込み客の獲得・認知拡大・商品や売上UPを目的として作られ、閲覧されるために存在しているからです。
そして上位表示されるかどうかでユーザーの流入数が大きく変わるため、HPの運用者には必須の知識です。
SEOは検索エンジンのアルゴリズムに多くを依存するため、アップデートにより内容や方向性が大きく左右される場合があります。
過去の方法が当てはまり続けるとは限らないため、常に最新の情報をチェックしましょう。
ホームページの基本用語解説編
①ヘッダーについて
ヘッダーは、全ページに変わらず表示される部分です。
スクロールしても企業のロゴなどがずっと表示されていることがあるでしょう。
この企業ロゴの部分をヘッダーと言います。
ナビゲーションは、ページ上部に表示されている案内です。目的のページにすぐたどりつける分かりやすいホームページ制作に必要とされています。
②ファーストビューについて
ファーストビューは、ホームページを開いたとき、一番最初に表示される部分です。
らいちいわばサイトの「顔」と呼べるもので、アクセスしたユーザがもっと見てみたいと思えるようなデザインにすることで、ホームページの滞在時間延長を期待できます。
③メインコンテンツについて
メインコンテンツとは、商品紹介ページや会社概要などのホームページの中身です。
いわばWebサイトやアプリケーションにおいて、最も重要な情報やコンテンツのことを指しており、このコンテンツが無いと、ホームページを作っても会社情報や商品に関しての情報が伝わりません。
④フッターについて
フッターとは、ホームページの下にある、サービスの利用などを促す箇所のことです。
クリックすると、お問い合わせページに飛べるようなものがフッターだと思って構いません。
さまざまなページの下部に表示され、商品の購入やサービスの利用を促したりもします。
サイトの種類解説編
らいちサイトの種類についても基礎知識として押さえておきましょう。
なぜならばサイトによって目的やターゲットとなる層、発信するコンテンツが違うので、それぞれに合わせたサイトの構築が必要となってくるからです。
①コーポレートサイト
コーポレートサイトとは、企業を多くの人に知ってもらうための情報を公開するサイトのことを指し、その企業が「何をしている企業なのか」を知ってもらうためのWebサイトです。
就職希望者も含めたあらゆる層をターゲットとしており、会社概要や商品・サービス、採用情報など様々な情報を掲載します。
②サービスサイト
サービスサイトとは、企業が提供している商品やサービスについての情報を発信するためのWebサイトです。
Webサイト上に閲覧するユーザーの知識量や目的に沿った情報を掲載することで、企業の訴求や商品の販促効果を期待できます。
③ECサイト
ECサイトとは、ネット通販サイトのことで、僕たちが普段利用するAmazonや楽天などもECサイトにあたります。
クリック率によって売り上げが何パーセントも変わるので、商品がわかりやすい構成にする必要があります。
④採用サイト
採用サイトとは、求職者に向けて自社の情報を発信するためのWebサイトのことを指します。
企業によっては採用サイトを設けず、エージェントから求職者を紹介してもらう手法をとる場合もありますが、採用サイトを設けておくほうが、求職者が自ら情報を入手できるため、安心感や信頼につながります。
フレームワークについて
フレームワークとは、Webサイトなどを作るときに、土台として機能するソフトウエアのことです。
「枠組み」という意味を持っており、サイトを構築するときに必要な素材が、いくつかの種類に分けてあらかじめ用意されています。
フレームワークも、見やすいホームページ作りに有用です。
ホームページを閲覧する人は、すべての文字を丁寧に読むわけではありませんので、いかに短時間で内容が伝わるデザインにするかが重要です。
そのため、フレームワークを活用しわかりやすいサイト作りを心掛けましょう。
レスポンシブデザインについて
レスポンシブデザインとはPC、スマートフォン、タブレットなどそれぞれのユーザーが使用しているデバイスに応じて、画面サイズや操作を最適化したデザインのことです。
デバイスごとにCSSを弄ってデザインを最適化させる必要がほぼなくなるため、管理が簡単になります。
これに対応していない場合、スマートフォンで閲覧すると極端にサイトの文字が小さくなったり、タブレットで閲覧すると表示エラーが出たりと不具合がおきる場合があります。
また、おなじスマートフォンであっても、androidやiOSなど使われるOSに応じて表示の縮尺等が変わる場合もあるので注意が必要です。
UI、UXについて
UI（ユーザーインターフェース）は、ユーザーとサービスの「接点」を意味する言葉です。
Webサイトの場合は、フォントやデザイン、操作性などの「見た目・使いやすさ」を指します。
UX（ユーザーエクスペリエンス）は、ユーザーがサービスを通して得る体験のことです。
Webサイトの場合は、そのサイトを訪れたユーザーがどのような体験を得たのか、文字の読みやすさ、情報の充実度、快適な操作性、問い合わせの満足度など感じたこと全てを指します。
UIはUXの一部であり、UXを充実させるためのひとつの要素です。
それらを正しく構築できていないと、ユーザーに操作しづらい、分かりづらいという印象を高めてしまい、利用のリピート率などにも影響が出るため注意が必要です。
まとめ
らいち今回は、知っておいたほうが良いWebの基礎知識について解説しました。
ざっくりとした概要しかお伝えできていないので、詳しく知りたい方は、ご自身でも調べられてみたりすることをお勧めします。また、このブログの他の記事でも詳しく解説しています。
全てを理解する必要はありませんが、基礎知識として概要を抑えておくだけで学習や案件対応はずいぶん楽になります。
お客様との打ち合わせでも、こういった基礎的な知識について聞かれ、答えられないと恥をかきますし、信頼を失いかねないので抑えておきましょう。
かく言う僕も最初は全然わかっていませんでしたが、知らないことを恥ずかしがる必要は在りません。
概要をざっくり理解し、実務の中で経験を積んでいくことがスキルアップの近道だと思いますので頑張ってください。
では、次回の記事でまたお会いしましょう。
