これまでプログラミングを経験したことがない方には、ホームページ制作は難易度が高いように感じると思います。
しかし、ホームページ制作は、HTML・CSS・WordPress・画像編集などの4つのスキルを習得することで制作可能です。
これらのスキルを学ぶことで、ゼロからホームページを制作できなくても、簡単なレイアウト変更や文言などを修正することができます。
少しでも知識があれば、外注する際にもより的確で具体的な指示をだすこともできます。
このように、Webのスキルを身につけることで様々なメリットがあるのでおすすめです。
Webサイト担当者の方は、本記事で紹介するスキルを頭に入れておけば、必ず役に立ちます。
最後までお読みいただき、ぜひ参考にしてください。
これだけは覚えたい4つのスキル
先ほども説明したように、ホームページ制作に欠かせない4つのスキルは、HTML・CSS・WordPress・画像編集です。
それぞれのスキルを紹介する前に、まず概要を説明します。
HTML
Webサイトの土台となるのがHTMLです。
HTMLがなければ、Webサイトを制作することはできません。
プログラミングの中でも、比較的簡単な言語になり、マークアップ言語ともよばれます。
「HTMLは実際のどのように使われているのだろう ?」という疑問をお持ちの方には、実際にWebサイトで使用されているHTMLのコードを見るのがおすすめです。
HTMLのコードは誰でも簡単に見ることができます。
弊社のWebサイトを例に手順を解説します。
・STEP1、調べたいWebサイトにアクセス。
次に右クリックをして、「ページのソースを表示」を選択します。
選択すると別タブでHTMLのソースコードが表示されます。
表示されている大量のコードが、Webサイトを構成しているHTMLコードです。
「コード書いたり、理解するのは難しそう」と思われた方もいるかもしれませんが、一度覚えてしまえば簡単に記述できる上に、すぐに理解することができます。
CSS
デザイン・装飾の機能があるのは、CSSです。
HTMLだけではデザインすることはできず、簡素なWebサイトになるので、CSSで美しく装飾することが必要不可欠になります。
HTMLと比べると少し難易度が高くなりますが、複雑なルールなどはないため、すぐに理解できます。
また、デザインに関する専門知識がなくても、綺麗なWebサイトを制作できるので安心してください。
WordPress
コンテンツ管理をするために必要になるツールがWordPressです。
このツールを利用することで、ページの更新や追加を簡単にできます。
豊富な拡張機能があるので、高度な機能を搭載することも可能になり、カスタマイズ性が高いことが特徴です。
画像編集
HTML・CSS・WordPressさえあれば高機能なWebサイトを制作することが可能です。
しかし、Webサイトの見た目を大きく左右する「画像」が必要になります。
画像がそのサイトの美しさを担っているといっても過言ではありません。
サイトデザインが素晴らしくても使用している画像がイマイチだと、せっかくのデザインが台無しになります。
オシャレな画像をつくるために必要になるのが、「画像素材」と「編集するツール」です。
画像素材
サイトデザインに合った画像をつくるためには、それに合う画像を用意することから始まります。
無料で著作権フリーの素材を利用できるサービスもあれば、有料で使用できるサービスもあります。
無料の画像サービス
無料で使用できる画像サービスを紹介します。
PAKUTASO
PAKUTASOそは、無料で幅広い画像を扱うことができるのが魅力です。
人物・動物・風景・モンタージュなど様々なジャンルの写真を利用できます。
モデルの中にはインフルエンサーもいるのが特徴です。
URL：https://www.pakutaso.com/
足成
シーンによってジャンル分けされているので、場面によって合わせて選べるのがメリットです。
デザインが少し古くなっているため、少し使いづらくなっています。
Pixabay
高品質な画像が取り揃えられているのがこのサービスのメリット。
非常に使いやすく、ダウンロードする画像サイズも選ぶことができるのが嬉しいところになります。
検索結果の一番上には、有料画像サイトのshutterstockが表示されているので注意が必要です。
URL：https://pixabay.com/
有料の画像サービス
クオリティを求める方には、有料画像サービスがおすすめです。
価格は1,000円以上の商品がほとんどになります。
画像はWebの「顔」になるので、品質にこだわる方も多いです。
shutterstock
アメリカ発のサービスになり、外国人モデルがほとんどになり、日本にはないアメリカのセンスが画像に活かされています。
世界中の人気アーティストが毎日2万点以上の画像をアップロードしているので、品揃えは抜群。
単品での販売はしておらず、月額制の定額プランを採用しています。
1日25点までダウンロード可能などの形式のため短期的に集中して利用したい方におすすめです。
海外風のオシャレなWebサイトを制作している方にはぴったりです。
URL：https://www.shutterstock.com/home
amanaimages
250万点以上の作品を取り扱っている業界最大級のサービスです。
このサイトでは、ロイヤリティフリー(RF)とライツマネージド(RM)の2種類の形式があり、それぞれ仕様が違うので注意しましょう。
ロイヤリティフリーの商品は、1度購入すると何度でも使用可能になり、値段はサイズによって様々ですが、1万円〜4万円が相場になります。
ライツマネージドの特徴は、使用条件や使用期限があることがデメリットです。
しかし、作品の使用履歴がわかることがメリットになり、他のユーザーとの重複利用を避けることができます。
Webサイト上には、詳しい使用履歴は掲載されていませんが、会員になって電話で問い合わせることで企業名・団体名をしることができます。
販売しているのは、画像だけでなく、動画、イラストなども購入することが可能です。
URL：https://amanaimages.com/home.aspx
Aflo
業界の中で一番知名度が高く、有名なのがAfloです。
テレビニュース・新聞・webメディアなどで、1度は「写真提供：アフロ」の文字を見かけことがあると思います。
そのAfloが運営する画像サービスです。
amanaimagesと同じようにロイヤリティフリーとライツマネージドの2種類の形式があり、料金体系もほとんど同じになります。
他のサイトにはない、Afloだけが取り扱っている画像がたくさんあるため、愛用する方もたくさんいます。
URL：http://www.aflo.com/
HTML
ここからは、本格的なHTMLの説明をします。
まずは、必要になる定型文から覚えましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイトタイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> //ここにサイトのコンテンツを記述 </body> </html>
重要性が高く、一番最初に覚えるべきことは、「!DOCTYPE html」と「html lang=”ja”」の意味を理解することです。
!DOCTYPE html
「!DOCTYPE html」は、DOCTYPE宣言とよばれ、ブラウザにHTMLのバージョンを知らせるために、使用するため「head」や「html」の前に書く必要があります。
一番上に書く必要があることを覚えておきましょう。
html lang=”ja”
このコードは、Webサイト内で使用する言語を表すためにあります。
「ja」は「japanese」を意味しており、日本語を使用する場合は「ja」を使用します。
英語を使用する場合は「en」、中国語を使用する場合は「zh」を使いましょう。
次は、「head」、「meta charset」、「title」、「link rel=”stylesheet”」について説明します。
弊社のWebサイトも、一番上部に「!DOCTYPE html」と「html lang=”ja”」を記述しています。
head
HTMLでは、「html」、「head」、「body」の3種類でWebサイトの構造を制作するのがルールです。
「html」は、先ほども説明したようにHTML文書であることを宣言するタグになり、「head」は、文字コード、タイトル情報、スタイルシートの情報などを記述します。
「title」タグは、タブの上部に表示されますが、それ以外のhead内の情報は一切ブラウザに表示されません。
meta charset
「meta charset」は、文書の文字エンコーディングを指定する際に使用します。
エンコーディングの種類としては、「utf-8」の他に「shift_jis」や「euc-jp」などがありますが、一般的にはutf-8が使用されます。
エンコーディングを設定していない場合に起こる障害は、日本語が記述されているWebサイトに英語版のブラウザでアクセスすると、文字化けが起こるので、必ず設定するようにしましょう。
title
これはサイトのタイトルを記述するためのタグです。
Webページ内には表示されませんが、ブラウザのタブに表示されます。
SEOの面でtitleタグは重要なので、上位表示させたいキーワードを含むようにしましょう。
link rel=”stylesheet”
別ファイルにCSSを記述している場合は、「link rel=”stylesheet”」を使って外部ファイルを読み込みます。
ほとんどのWebサイトはメンテナンス性などを意識してCSSファイルを外部に設定するので、このタグは必ず覚えましょう。
body
bodyタグは、Webサイトの中身の部分になります。
このタグ内で記述されたコードが、画面上に表示されます。
HTMLで必要になるコードはこれまでになり、次はbodyタグ内で使用するタグについて実例を用いながら説明するので参考にしてください。
header
「header」タグは、Webサイトの上部に表示されるメニューなどになります。
弊社Webサイトでは、以下の部分がheaderです。
注意するべき点は、headタグとheaderタグの違いです。
スペルは似ていますが機能や枠割は全く違うので間違わないようにしましょう。
headタグ内に記述されたことは表示されませんが、header内で記述されたことは表示されます。
弊社のheaderのコードは、このようになっています。
<header> <!--ヘッダここから--> <div id="header_up"> <div class="wrap cf"> <ul> <li><a href="https://kumaweb-d.com/tokusyo/"><i class="fa fa-arrow-right"></i>特定商取引法に基づく表記</a></li> <li><a href="https://kumaweb-d.com/faq/"><i class="fa fa-arrow-right"></i>よくあるご質問</a></li> <li><a href="https://kumaweb-d.com/contact/"><i class="fa fa-arrow-right"></i>お問い合わせ</a></li> </ul> </div> </div> <div id="header"> <div class="wrap cf"> <h1>制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！</h1> <div class="img"><a href="https://kumaweb-d.com/"><img src="https://kumaweb-d.com/wp/wp-content/themes/kumaweb_v3/images/header_logo.png" alt="くまweb コーディング代行" /></a></div> </div> </div> <!--ヘッダここまで-->
ulタグ・liタグ
header内で使用されている「ulタグ」と「liタグ」について説明します。
ulタグは、liタグを使用するときに必要になるタグです。
ulタグの他にolタグがあります。
olタグを使用すると番号が表示され、ulタグを使用すると箇条書きで表示される違いがあります。
liタグは、ulタグやolタグとセットで使用し、リスト表示する場合に使うため、使用頻度が高く、使いこなせるようになりましょう。
a hrefタグ
クリックすることで別のWebサイトや違うページに飛ばしたいときに使用するのがa hrefタグです。
target=”_blank”と設定することで新しいタブを開いてリンク先のページを表示します。
divタグ
divタグは、それ自体に意味はありませんが、divタグで囲った部分を1つの要素としてグループ化することができます。
そうすることで、デザインがしやすく、時間を短縮できるメリットがあります。
HTMLで使用するタグは他にもありますが、最低限ここで紹介したタグは覚えておいてください。
今回、紹介したHTMLタグを使いこなすだけで、Webサイトを制作できます。
CSS
HTMLでwebサイトの枠組みが完成した次は、CSSでデザインやレイアウトを整えましょう。
ここでも弊社のWebサイトを例に用いて説明します。
CSSは要素を指定して、適用させるデザインを設定します。
header部分のCSSはこのようになります。
#header_up {
background-color: #000000;
padding: 5px 0 8px 0;
}
.cf {
min-height: 1px;
}
.cf {
display: block;
}
#header_up ul {
float: right;
}
#header_up ul li {
font-size: 1.2rem;
margin: 0 0 0 10px;
float: left;
}
CSSの詳しい書き方はこのようになります。
セレクタ(指定先の要素){
プロパティ(なにを):値(どうする):
}
まずは、要素を選択してから、プロパティと値を決定する順番です。
各プロパティと値について説明します。
background-color
background-colorは背景色を設定する際に使用するプロパティです。
値にはカラーコードもしくは英単語を記述します。
英単語の場合は、「black」、「blue」、「red」、「white」など指定する色を選択。
カラーコードは、「#000000(黒)」。「#0000FF(青)」、「#FF0000(赤)」、「#FFFFFF(白)」など設定したい色に該当するコードを入力します。
カラーコードは、こちらのWebサイトで確認しましょう。
URL：http://www5.plala.or.jp/vaio0630/hp/c_code.htm
padding・margin
paddingとmarginは、どちらも幅を調節するプロパティです。
この2つの違いは以下のようになります。
・margin・・各要素との間隔をとるためのプロパティ
・padding・・要素内で間隔をとるためのプロパティ
ピクセルなどで数値を指定して間隔をとることができます。
このような使い方もあるので参考にしてください。
・margin-top: ○px;・・上に間隔をあける
・margin-right: ○px;・・右に間隔をあける
・margin-bottom: ○px;・・下に間隔をあける
・margin-left: ○px;・・左に間隔をあける
・margin: ○px(上) ○px(右) ○px(下) ○px(左)・・上下左右に間隔をあける
・padding-top: ○px;・・上に間隔をあける
・padding-right: ○px;・・右に間隔をあける
・padding-bottom: ○px;・・下に間隔をあける
・padding-left: ○px;・・左に間隔をあける
・padding: ○px(上) ○px(右) ○px(下) ○px(左)・・上下左右に間隔をあける
min-width・min-height
要素内最小限の高さや幅を指定します。
使用例はこのようになります。
.test {
min-height: 1px;
min-width: 1px;
}
display
displayは、要素の表示形式を決めるプロパティです。
値として設定できるのは、「block」、「inline」、「inline-block」、「none」の4つになります。
・block・・要素が横に広がり、縦に並ぶ
・inline・・要素が横に並ぶ
・inline-block・・blockとinlineの中間になり、並びは横になる
・none・・非表示になる
float
floatは、要素の配置を変える場合に使用します。
値として設定できるのは、「left」と「right」の2つです。
・left・・指定した要素を左に配置させ、その後の要素はその右側に回り込みます。
・right・・指定した要素を右に配置させ、その後の要素はその右側に回り込みます。
他にもCSSのプロパティや値などあるので、様々なWebサイトを参考にしてください。
WordPress
コンテンツ管理に必要なのはWordPressです。
WordPressの設定は、過去記事で詳しく紹介しているので、そちらを参考にしてください。
WordPressの解説記事URL：https://kumaweb-d.com/wordpress/php_wordpress_how_to/
こちらの記事で説明されている手順に沿って設定すれば問題なく、WordPressを設定できるので、WordPressで使えるおすすめのプラグインを紹介します。
simple-map
Googleマップを表示させるために使うのは、simple-mapというプラグインです。
ショートコードを利用することで簡単にGoogleマップの表示が可能になります。
ショートコードはこのようになります。
[map addr=”東京都港区芝公園４丁目２−８”]
また、Googleマップはプラグインを使用しなくても表示することが可能です。
まずは、表示させたい住所をGoogleで検索します。
(今回は東京タワーを例に用いて説明します。)
「すべて」の右に表示されている「地図」をクリックしてマップ表示に切り替えます。
画面に表示されている「共有」を選択。
「地図を埋め込む」のタブに切り替えてコードを確認します。
ここに表示されているコードを使うことで、Googleマップを表示させることができます。
All In One SEO Pack
「All In One SEO Pack」は、WordPressでのSEOを簡単に設定できるプラグインです。
新しいプラグインを追加する方法は、サイドバーから「プラグイン」を選択して、「新規追加」をクリック。
検索ボックスに「All In One SEO Pack」と入力して、検索すると該当するプラグインが表示されます。
今すぐインストールをクリックして、プラグインを導入しましょう。
サイドメニューに表示されている「All In One SEO」から「一般設定」をクリック。
次に「ホームタイトル」と「ホームディスクリプション」を設定します。
各項目はこのように設定します。
・ホームタイトル・・Webサイト(トップページ)のタイトルを入力
・ホームディスクリプション・・Webサイト(トップページ)の説明を入力
次に各ページのタイトルを設定しましょう。
必ず設定すべきなのは、「ホームページタイトル形式」、「固定ページタイトルフォーマ」、「投稿タイトルのフォーマット」の3つです。
詳しい設定方法は、以下を参考にしてください。
・ホームページタイトル形式・・%page_title%
・固定ページタイトルフォーマ・・%page_title% | %blog_title%
・投稿タイトルのフォーマット・・%post_title% | %blog_title%
この他以外にも便利なプラグインはたくさんあります。
詳しく知りたい方はこちらの記事がおすすめです。
参考記事URL：https://kumaweb-d.com/wordpress/plugins-for-cta/
画像編集
次に説明するのは画像編集です。
画像編集に使えるツールを説明します。
pixlr
無料で使用できる上に、インストールする必要もないので気軽で簡単に利用できるのが魅力。
pixlrURL：https://pixlr.com/editor/
アクセスするとこのような画面が表示されます。
ゼロから画像を制作する場合は、「新しい画像を作成」をクリック。
すでに存在する画像に編集を加える場合は、「コンピューターから画像を開く」を選択します。
使用方法は一般的な画像編集ツールと変わりません。
主に使用する基本的な機能の一部を説明します。
①・・画像の一部分だけを切り取ることができる
②・・画像の背景を透過、変更できる
③・・画像で使用されているカラーコードを調べる
④・・色をペイントできる
⑤・・図形を描画できる
⑥・・文字を入力できる
Skitch
ちょっとして画像加工に便利なのが、Skitchです。
Evernoteと連携しており保存したデータは、Evernoteに自動的に保存されます。
難しい加工はできませんが、直感的に操作できるため初心者の方におすすめです。
こちらのツールはダウンロードする必要がありますが、無料で使用できます。
まとめ
Webサイト制作に必要な4つのスキルを紹介させていただきましたが、いかがでしたか。
Webメディアを担当されている方や個人でサイト運営している方は、最低限の知識を知っておく必要があるので、この際に覚えておきましょう。
他の記事でもWebスキルに関する記事があるので、ぜひ参考にしてください。