TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML サイトfavicon.htmlkit.comでFaviconを作成する方法を現役デザイナーが解説【初心者向け】
icon
icon
HTML

サイトfavicon.htmlkit.comでFaviconを作成する方法を現役デザイナーが解説【初心者向け】

初心者向けにサイトfavicon.htmlkit.comでFaviconを作成する方法について解説しています。ファビコンとはWebサイトを訪れた際にブラウザのタブに表示されたり、ブックマークの先頭に表示されるアイコンのことです。ファビコン作成ツールfavicon.htmlkit.comを使ったファビコンの作成に挑戦してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

サイトfavicon.htmlkit.comでFaviconを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

サイトfavicon.htmlkit.comでFaviconを作成する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

ファビコンとは

ファビコンとは、ウェブページを開いたブラウザのタブや、お気に入りに追加したページタイトルの横に表示されるアイコン画像のことです。

 

サイトfavicon.htmlkit.comの解説

favicon.htmlkit.comはファビコン画像をオンラインで生成してくれるウェブサービスです。
http://favicon.htmlkit.com/favicon/

 

[PR] Webデザインで副業する学習方法を動画で公開中

サイトfavicon.htmlkit.comでFaviconを作成してみよう

ここでは星型のファビコンを作成したいと思います。まず、正方形の画像を用意します。

用意できたらファイルを選択ボタンから作成した画像を参照します。

アップロードが完了すると、ダウンロード画面に変わります。ダウンロードリンクをクリックしてファイルをダウンロードします。

ダウンロードしたフォルダを開き確認すると、favicon.icoファイルが生成されていますね。

こちらをサーバーにアップしmetaに下記コードを記述することで反映されます。
hrefはサーバーにアップしたfavicon画像までのパスを指定します。

<link rel="icon" href="https://abc.com/ico/favicon.ico" />

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】

HTMLでspan要素で囲った部分を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】

HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法を現役デザイナーが解説【初心者

HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初...
HTML

HTMLでテーブルの列数を指定する方法を現役エンジニアが解説【初心者向け】

HTMLのテーブル（表組み）の列数を指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 H...
HTML

HTMLで謎の空白を消す方法を現役デザイナーが解説【初心者向け】

HTMLで謎の空白を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTM...
HTML

HTMLでナビゲーションメニューバーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLでナビゲーションメニューバーを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次...
HTML

あわせてよく読まれている記事

WordPressでファビコンを表示させる方法【初心者向け】

ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン（favicon）」といいます。 テックアカデミーマガジンのファビコンはこの画像のように表示されています。   ファビコンは単に装飾ではなく、ブランディング力向上や、クリック率UPの効果があるとも言われています。 WordPressでもファビコンを簡単に表示できます。 目次ファビコンとはサイトfavicon.htmlkit.comの解説サイトfavicon.htmlkit.comでFaviconを作成してみよう監修してくれたメンター   大石ゆかり 田島メンター！！WordPressでファビコンってどうやって変更するんでしたっけ？ 田島悠介 ファビコンを変更する方法は「テーマを編集する方法」と「プラグインで変更する方法」の2種類あるんだ。 両方知っておいて損はないから、両方教えてあげるね。 大石ゆかり はい、お願いします！！！   事前準備：favicon用のファイルを作成する まず、事前準備としてfaviconの画像を用意します。 ファビコン用画像の作り方は簡単です。 画像はPhotoshopなどの画像作成ソフトで正方形で作り、それをfaviconの形式（.ico）に変換します。   ファイルの変換はFavicon From Picsというサイトが便利です。 サイトにアクセスし、ファイルをアップすると変換してzipファイルのダウンロードが可能になります。 zipファイルを解凍したら、いよいよfaviconの設定を行います。   テーマファイルを編集する方法 FTPソフトを利用して、任意の場所にfaviconアイコン（拡張子が.ico）をアップロードする方法です。 今回は、WordPress本体と同じ階層にアップロードした前提で説明します。 （wpというフォルダの中にWordPressがある場合は、wpというフォルダの中にアップロードします）   次に、ダッシュボード>外観>テーマエディターをクリックします。   右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。   ソースコードが表示されたら、</head>を探してください。 見つかりにくい時はCtrlキー＋F（Macの場合は⌘+F）を押すと、ページ内検索ができます。   ここで下記のソースコードをコピー&ペーストしてください。 <link rel=”SHORTCUT ICON” href=”http://ドメイン名/wp/ファビコン名.ico” /> 日本語部分は、自分のサイトに合わせて変更しましょう。 faviconファイルをアップロードした場所によって、href=” “の部分の表記が変わるので、注意が必要です。   完了したら、「ファイルを更新」ボタンを押すと、反映されます。   [PR] Webデザインで副業する学習方法を動画で公開中プラグインを利用する方法 テーマを直接編集するのは難しい、という場合はプラグインを利用すると便利です。 いろいろなプラグインがありますが、今回はFavicon Rotatorというプラグインを使用します。 まずは、このプラグインをインストールします。 やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。   インストールが完了したら、ダッシュボード>外観>Faviconをクリックし、設定画面を開きます。   「Add Icon」というボタンをクリックし、faviconに設定したい画像を選択します。   ファイル形式やサイズは自動調整されるので、特に事前にファイル変換などはしなくても大丈夫です。 画像をアップロードしたら、ウィンドウ下部の「Add Browser Icon」をクリックします。 さらに「設定を保存」ボタンをクリックします。 これでしばらくすると、faviconが反映されます。 反映に時間がかかる場合があるので、焦らず待ってみてください。   うまくいきましたか？ WordPressをさらにカスタマイズしたい場合は、WordPressでウィジェットを編集する方法の記事もあわせてご覧ください。   大石ゆかり ファビコンを変更できました♪ありがとうございました！ 田島悠介 ファビコンってとても地味だけど、サイトのイメージを表すからきちんと変更しておくことが大事だね♪ 大石ゆかり はい、そうですね♪   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。  
WordPress

HTMLによるファビコンの設定方法を現役エンジニアが解説【初心者向け】

HTMLによるファビコンの設定方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ファビコンとはサイトfavicon.htmlkit.comの解説サイトfavicon.htmlkit.comでFaviconを作成してみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ファビコンの設定方法について詳しく説明していくね！ 大石ゆかり お願いします！   ファビコン（favicon）とは ファビコンとはブラウザでWebサイトを閲覧した際に、サイト名の左側に表示されるアイコンのことを指します。 ファビコンは複数のWebサイトを開いている場合には、Webサイト名が隠れファビコンだけが表示されるのでサイトの視認性も良くなり、ユーザビリティも良くなります。   例えば、次の図の赤枠内がテックアカデミーマガジンのファビコンです。   ファビコンのないサイトでは、ブラウザによって角の折れた紙や、地球のような丸い表示がされています。 少しでもWebサイトを他より目立たせ、細部にまで気を使うにはファビコンの設定は必要なものです。   ファビコンを設定する場合は、次のようなコードをHTMLに実装すると良いです。 <link rel="icon" href="favicon.ico">   アップルタッチアイコンとは ファビコンと似たような機能で、アップルタッチアイコンというものがあります。 アップルタッチアイコンというのは、ホームページをスマホのホーム画面に追加したときに表示されるアイコンです。 ブラウザによってはアップルタッチアイコンを設定すれば、ファビコンとして読み込んでくれる環境も存在します。 アップルタッチアイコンを設定する場合は、次のようなコードをHTMLに実装すると良いです。 <link rel="apple-touch-icon" href="icon.png">   [PR] Webデザインで副業する学習方法を動画で公開中ファビコン画像の作成サービス ao-system.net 画像を1枚指定するだけで、ファビコンに必要な素材や、アップルタッチで必要なアイコンなどを一括で作成できます。 それでは実際に、ファビコン作成サービスを利用してファビコンを作成してみましょう。   １．画像ファイルの用意 pngやjpgやgif形式のファイルを用意してください。 今回は記事内で利用した次の画像を使ってみます。   ２．ファビコンの生成 画像ファイルを選択し、一括作成ボタンをクリックすると次のようにファイルが作成されます。   ３．ファビコンをダウンロード ファビコンをダウンロードというボタンをクリックすることで、favicons.zipファイルがダウンロードされます。   ４．favicons.zipを解凍（展開） お手元のPCでfavicons.zipを解凍（展開）してください。 すると次のようにたくさんのファイルが表示されます。 ファビコンを設定するだけであれば、favicon.icoのみを利用します。   ファビコン（favicon）の設定方法 ファビコン画像の用意 ファビコンの設定方法としてまず、アイコン用の画像を用意します。 使用する画像形式としては、png、gif、icoなどの拡張子が存在します。 初心者の方が利用する場合は、ファビコン作成サービスを利用するのが簡単です。 ファビコン作成サービスで作成した画像形式は、ico形式が一般的です。   ファビコンの設置 ファビコン生成サービスで作成した favicon.ico という名称のファイルを、index.htmlが存在するフォルダ階層にアップロードします。   ファビコンの読み込み設定 HTMLファイルのhead要素内に次のコードを実装します。 <link rel="icon" href="favicon.ico">   実際に書いてみよう ここでは、ファビコン作成サービスでfavicon.icoというファイルを用意した状態から説明します。   icoファイルアップロード サーバのindex.htmlが存在する一番上位の階層に、favicon.icoというファイルをアップロードします。   HTMLへの実装 HTMLにファビコンを指定する<link rel=”icon” href=”favicon.ico”>というコードを実装します。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <title>テックアカデミーマガジンでファビコンを設定するサンプル</title> <link rel="icon" href="favicon.ico"> </head> <body> </body> </html>   表示結果 このようにブラウザのタブにファビコンが表示されます。 今回は文字が表示されている画像を指定したため、文字が小さすぎて潰れてしまいました。 実際にファビコンとして利用する場合は、できるだけ単純な形のものを利用していただくと良いですよ。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

Favicon Rotatorの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を初心者向けに紹介する記事です。 今回は、WordPressにファビコンを追加できるプラグイン、Favicon Rotatorの使い方を紹介します。 目次ファビコンとはサイトfavicon.htmlkit.comの解説サイトfavicon.htmlkit.comでFaviconを作成してみよう監修してくれたメンター   大石ゆかり 田島メンター！！ブラウザのタイトルのところにあるアイコン画像あるじゃないですか？ 田島悠介 あぁ、ファビコンのこと？ 大石ゆかり ファビコンっていうんですね！それをWordPressのサイトで変更したいんですけど、どうやればいいんですか？ 田島悠介 それなら「Favicon Rotator」っていうのを使えばできるよ！   Favicon Rotatorとは ファビコンとは、Wrbサイトを閲覧する際にタブに表示されるアイコンです。 ブランディングなどに有効で、他サイトと比較してオリジナリティを表現できる箇所でもあります。 お気に入り登録した際にも表示され、設定することでサイトの信頼性やクリック率向上が期待できます。     Favicon Rotatorは、WordPressのサイトで簡単にファビコンを追加できるプラグインです。 テーマファイルを編集する必要なく、面倒なサイズ調整などもしてくれるので、非常に簡単に設定できます。 また、このプラグインではファビコンだけでなく、スマホの画面にサイトへのリンクを作成したときに表示されるタッチアイコンも設定可能です。     プラグインをインストールする このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。   プラグインの設定ができると、ダッシュボード＞外観＞Favicon　というリンクが増えています。   [PR] Webデザインで副業する学習方法を動画で公開中ファビコンを追加する 管理画面は、非常にシンプルです。   登録したい画像を、「Add Icon / Set Icon」をクリックして「ファイルを選択」で選択し、「Set Browser Icon / Set Touch Icon」ボタンをクリックして設定します。 「設定を保存」ボタンをクリックします。 サイズは自動調整してくれるので問題ありませんが、正方形の画像を準備するほうが見た目がキレイです。 また、アップロードしたり、メディアファイルから選択するだけで、自動的にサイズを調整してくれます。 もし、正方形でない画像を選択した場合は自動的にトリミングされます。   画像を追加したら、保存ボタンを押しましょう。 ブラウザでサイトを見てみると、設定したファビコンが表示されます。 今回の記事は以上です。   WordPressの他のプラグインを使って見たい場合は、W3 Total Cacheの使い方も合わせてご覧ください。   大石ゆかり 大きい画像でも小さくリサイズしてくれるのが便利ですね〜 田島悠介 そうだね。スマホのタッチアイコンの設定をできるから、スマホを意識しているサイトなら設定しておいたほうが良いね 大石ゆかり はい♪   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

HTMLのlink要素のtype属性とmedia属性の使い方を現役エンジニアが解説【初心者向け】

HTMLのlink要素のtype属性とmedia属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 link要素のtype属性とmedia属性の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 link要素とは link要素で指定するtype属性とmedia属性について link要素のtype属性とmedia属性を使ってみよう まとめ   link要素とは link要素は外部のファイルやアイコンなどのリソースをHTML文章に結びつけるために使用します。以下のようにスタイルシートの参照に良く用いられます。 <link rel="stylesheet" href="style.css">   [PR] Webデザインで副業する学習方法を動画で公開中link要素で指定するtype属性とmedia属性について アイコンなどを参照する場合はtype属性を指定します。以下はWebページのアイコンを指定している例です。なお、現代のブラウザはほとんど自動的にfavicon.icoを読み込もうとします。よって以下の記述が無くてもfavicon.icoファイルがあればWebページのアイコンとして設定されます。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 特定の条件下でリソースを読み込む場合、media属性を指定します。例えば以下は印刷時に適用するスタイルシートを参照しています。 <link rel="stylesheet" href="print.css" media="print"> link要素について、詳しくは以下の記事も参考にしてください。 MDN – <link>：外部リソースへのリンク要素   link要素のtype属性とmedia属性を使ってみよう 今回のサンプルプログラムではlink要素のtype属性やmedia属性の使い方について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>Sample</title> </head> <body> <div>こんにちは！</div> <hr> <input type="button" onclick="window.print()" value="印刷"> </body> </html> style.css div { font-size: 3rem; color:
HTML

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。 最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。 ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。 また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。 目次ファビコンとはサイトfavicon.htmlkit.comの解説サイトfavicon.htmlkit.comでFaviconを作成してみよう監修してくれたメンター   1 制作前と制作中の注意点 1.1 ヒアリングの際に注意すべき事 在宅でできる副業としてWeb制作の仕事をする場合、Webディレクションからデザイン、コーディングまでの一連の作業を一人で行なうことがあり、効率よく進めることが納期を達成する鍵になります。 顧客からヒアリングを行ない、仕様をまとめワイヤーフレーム、デザインカンプを作成し、コーディングを行なって、公開となります。その際、制作の根底にある、以下のようなサイト制作の目的を顧客と共有します。 なんのためにサイトを作るのか サイトを作ったことで何を達成したいのか その目的にあったデザイン・システムの提案と設計、導線設計、SNSやWeb広告などの戦略やユーザビリティも加味した仕様書・ワイヤーフレーム・デザインカンプの作成を進めていきましょう。 顧客ともワンチームということで認識を合わせ、同業他社のページや実際にあるサイトのページを見ながら打ち合わせを行なうなど、イメージを共有しながら進めるとズレがなくスムーズに進行します。 あとになって、大幅な仕様追加などの要求が出ないように小まめに情報や目的を共有するためにコミュニケーションを取りましょう。 1.2 制作中に注意すべき事 いざ、仕様が決まりワイヤーフレーム、デザインカンプ作成からコーディングを行なう際の注意点として、顧客とFIXした仕様書のとおりにデザインを作成し、コーディングを行なっているかが大前提となります。 以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。 デザインが崩れている プログラムが動作しない フォントの種類がデザインカンプと異なる 異なるブラウザやデバイスによる見え方の調整を行なっていない etc… また、無事納品は終えたとしても、目標達成のためのデータ解析や分析タグの設定などの対策を怠ると、せっかく受注して仕事をしても今回きりで後々のお付き合いにはつながらない可能性があります。 ページ管理やリニューアル等でも末長いお付き合いを続けるためには、目的を達成するためのツールとしてお金をいただいてホームページを作成するという意識を忘れず、ユーザや顧客に自分を置き換えて、他者目線も意識した、快適に目的を達することができるサイト作成をしましょう。   2 制作後、納品前の注意点 2.1 デザイン関連のチェック項目 2.1.1 表記チェック デザインカンプと仕様書の条件を確認し、顧客の指定の表記方法に基づいているか、スペルミスや表記ゆれも同時にチェックします。 ページ内のテキストチェックツール　difff(デュフフ) https://difff.jp/ 2.1.2 デザインチェック デザインカンプと比較し、レイアウト配置や色、余白、文字（フォントの種類、サイズ・太さ・文字間隔・ジャンプ率）などデザインを忠実に再現しているか確認します。 2.1.3 ダミーチェック 提案時にダミーで入れたテキストや画像をそのままにしていないか、画像・動画の表示有無やサイズ、容量が適切かも最終チェックします。 2.1.4 faviconの設定 Webページに設置するシンボルマークのことです。設定は必須ではありませんが、タブ内にページの象徴するアイコン（例：会社ロゴ等）があることにより、ユーザはサイトを認識しやすくなりリピートに繋げることができる重要なアイコンです。 WebブラウザではURLの左横またはタブに表示され、お気に入りに登録するとブックマークアイコンとして表示されます。 ファビコン favicon.icoを作ろう！ https://ao-system.net/favicon/ 設定した後は、しっかり表示されるかどうかを必ず確認しましょう。 2.1.5 著作物、使用写真等流用掲載についての確認 一般的に、写真や音源、動画などには著作権が設定されており、他者の著作物をWebページで掲載する場合は、権利元が設定している利用規約を確認する必要があります。著作物によっては、権利元に承諾を得てから掲載することが求められます。 著作物をダウンロードするときだけでなく、Webページの公開前にも再度、利用規約を確認しましょう。 2.2 コーディング関連のチェック項目 2.2.1 ブラウザチェック レスポンシブサイトの場合は、Google Chromeのデベロッパーツールに付属のエミュレーターでのチェックの他、WindowsやMacといったPCでFirefox・Safari・Edgeでのブラウザチェック、スマートフォン（iPhone/Android）の実機を使ったチェックを行ないます。 各種ブラウザでチェックを行ない、レイアウトの崩れがないか確認しましょう。 2.2.2 HTML/CSS記述チェック 制作したホームページのHTMLやCSSが要求仕様に即した正しい記述をしているかを以下のチェックツールで確認し、エラーがあれば修正しましょう。 The W3C Markup Validation Service https://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 2.2.3 jQuery・JavaScript・PHP等で作成したコンテンツ jQuery・JavaScript・PHPなどのコンテンツについて、以下のような内容の動作チェックを行ないます。 正常に動作するかどうか 読み込み速度は遅くないか 画像容量は重くないか 各種ブラウザに対応しているか etc… また、商用利用や改変は可能か、使用可能であっても著作権の表示などの条件はないか、などを公開前にあらためて確認しておきましょう。 海外のサイトからのオープンソースを流用した場合は、翻訳機能を使用するなどして、しっかりと確認してから使用しましょう。 PageSpeed Insights https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ https://qiita.com/tukiyo3/items/58b8b3f51e9dc8e96886 2.2.4 リンクチェック リンク切れしていないかをチェックします。パンくずリストのリンクもチェックします。ヘッダーやフッターなどの共通部分についても、リンク切れがないか確認しましょう。 リンク切れチェックツール　Dead-link-checker.com http://dead-link-checker.com/ja/ 2.2.5 404ページ サーバに接続できたものの、該当するページが移動または削除されたことでページがない場合に表示させるページを「404ページ」といいます。 サイトの品質維持のためにも、あらかじめオリジナルページとして作成しておきます。このページが正しく表示されるか確認しましょう。 2.2.6 301リダイレクト設定 あるページへのアクセスを別のページに転送させることを「301リダイレクト」といいます。 たとえばサイトをリニューアルしてURLが変わった場合は、301リダイレクトの設定に漏れがないか、新旧サイトの各コンテンツ（ページ）の設定が1対1になっているか確認しましょう。 301リダイレクトは、ドメインやサーバに変更がある場合、必須となる設定です。301リダイレクトの設定をすることにより、検索順位が下がるリスクを軽減します。 2.3フォーム関連のチェック 2.3.1 入力された内容のチェックに関する動作確認 フォームの各項目の入力内容に対し、「必須項目なのに入力されていない」「半角英数のみ受けつけるルールなのに全角文字が入力されている」などがあった場合にエラーメッセージを返しているか確認しましょう。 2.3.2 ページ遷移の確認 入力画面→確認画面→完了画面にページが正しく遷移するかどうかを確認しましょう。 2.3.3 自動返信メールの確認 送信完了の画面が表示された際、ユーザのアドレスと管理者のアドレスにそれぞれメールが届いているかを確認します。 サンクスメールの文面やアクセスページなどへのリンクを設けた場合は、リンク切れのチェックも行いましょう。 2.4 タグ関連のチェック（SEO関連設定チェックも含む） Googleの検索エンジンのロボット（クローラー）のページ理解を上げる対策が、ページの管理や整理にもなり、結果としてサイトの検索順位の向上やページの質の向上につながります。そのため、作成後のチェックだけで終わらせず、ページを運用する際にもこれらの作業は日々継続して行なうとよいでしょう。 2.4.1 metaタグの設定チェック Googleの検索エンジンの進化とともに、以下のようなWebページが検索上位に表示される傾向となってきました。 – コンテンツとページ内容をしっかりと作成している – 内容に準じた適切なmetaタグを設定している 各ページに適したタイトル・ディスクリプションが、適正な文字数で、なおかつページに即した内容で設定されているかを確認しましょう。 また、キーワードは重要視されなくなりましたが、ページ内容に準じて設定しているかどうかも、合わせて確認しておきましょう。 META SEO inspector サイト作成後のチェックだけでなく、運用の際のサイトメンテナンスとしてGoogle Chromeのアプリとして設定して使用できる便利なツールです。 https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef WordPressでページを作成した場合は、プラグインを使います。 All in One SEO metaタグ作成の他、後述の「サイトマップXML」の作成もできます。 https://ja.wordpress.org/plugins/all-in-one-seo-pack/ 2.5 OGPの設定 OGP（Open Graph Protocol）は、SNSでシェアされた際に、そのページのタイトルや概要・URL・アイキャッチ画像を表示させるためのhtml要素です。 OGPを設定しておくと、ユーザに対してページの内容を正しく伝えることができます。設定していない場合、SNS側で勝手に説明文や画像を抽出して表示してしまい、サイトオーナーの意図していない内容がSNSに表示されてしまいます。 また、Facebookでは、OGPを設定することにより、分析や解析ツールである「ページインサイト」の機能を利用できます。 以下のサイトで、設定したOGPがSNSでシェアされた際にどのような見え方なのかを確認できます。 OGP確認 https://rakko.tools/tools/9/ 2.6 hタグ（見出し）の設定 h1からh6の見出しタグが適切に設定されているかどうかを確認します。数字が小さいほど重要度は上がります。クローラーがページを理解するための大切な要素です。 hタグの使用には順番のルールがあります。数字が小さい順（重要度の大きい順）に並べます。マトリョーシカ人形と同じイメージで、たとえば、h3より重要度の大きなh2をh3の中に入れるような並べ方は推奨されません。 クローラーにコンテンツの構造を正確に伝えるためには順番を守って使用するようにしましょう。 2.7 alt属性 alt属性には、各画像の説明を入力します。alt属性を設定することで、万が一、画像が表示されていない場合に、画像の説明が表示されるようになります。 入力内容については、SEO対策にもなるように、画像の内容に即した内容を入力します。検索順位向上のためには、画像の内容説明はページ内容をクローラーに認識させる大事な要素ですので、漏れがないように登録しましょう。 2.8 サイトマップXML クローラーにページの構造を理解してもらうために使います。以下のようなツールを使って簡単に作成できます。作成後は、サーバに設定することでクローラーがサイトを認識します。 サイトマップを作成-自動生成ツール sitemap.xml Editor 1,000ページまでのサイトであれば無料で作成できます。 http://www.sitemapxml.jp/ ページの新規追加やリニューアル等でページ構成が変わった際には、サイトマップも合わせて同期しておきましょう。 新ページだけでなく旧ページもアップしておく場合など、内容の重複するページが存在する場合は、「悪質なコピーコンテンツではない」ということや、「重要なページである」ということをクローラーに知らせる必要があります。本記事では説明を省略しますが、「canonical」の設定や、「.htaccess」によるURLの正規化設定も、必要に応じて行なうようにしましょう。 また、サイトのリニューアルの場合は、ページの統合やURLの変更が多々ありますので、古いURLから新しいURLに自動的にページを転送する「リダイレクト」の設定も合わせて行ないましょう。 2.9 Web解析、計測タグ　チェック 2.9.1 解析ツールタグ・コンバージョン計測タグ・リマーケティングタグの設定 顧客とFIXしたサイト仕様書に応じて、GoogleAnalyticsやGoogle Adwords、Yahoo!プロモーション広告、タグマネージャーの設定内容と設置場所を確認します。 申し込み数・資料請求数などをコンバージョンとして設定し、計測する場合は、行動につながる導線設計が適切か正しく設定されていて、データが計測されているかも確認しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中3.まとめ Web制作の仕事は、Webサイトなどの成果物に対して対価をいただく仕事です。 完成した成果物をチェックしてエラーや不具合がないことが必須となります。上記のチェック事項を参考にして、作業の区切りで確認、修正を経て品質の高いサイトを作成して納品するようにしましょう。 ひとつひとつの正確で丁寧な作業が、信頼を築き、新たな受注につながります。トライ＆エラーを繰り返しながら技術を身につけ、サイト制作を重ねていくことにより成長していきましょう。 Web業界でキャリアを重ねていくには、継続的な技術習得と努力と柔軟な対応力が必要です。習得した技術を活かせる制作業務を楽しみととらえ、日々前進しましょう。   Web制作の仕事を確実にしたいなら Web制作はスキル習得の難易度が低いため、競合となる働き手が多いです。 もちろん、企業で実務経験を積んだハイレベル人材とも案件を取り合うことになります。 そのため、未経験からだとなかなか案件を獲得できないことも。 テックアカデミーのはじめての副業コースでは、Web制作の案件紹介をしているので、確実に仕事を受けられます。 ※フリーランスを目指す方にもおすすめです。 ※コース終了後の審査に合格し、案件に応募された方には1ヶ月以内の案件紹介を確約しています。 その他、案件サポート対象コースはこちら Webデザインコース フロントエンドコース フロントエンド副業コース（審査の合格までサポート） また、このようなお悩みを持ったことはありませんか？ 「スキルは習得したけど、自分の実力でこなせる自信がなく、案件への応募に躊躇してしまった」 このあるあるを解決すべく、現役エンジニア/Webデザイナー講師が案件の進行や、技術的なわからない点のサポートを無料で行います。 お仕事紹介 プロのサポート この2つのサービスがあるので、安心してお仕事に取り組めます。 Web制作に必要なスキルを体系的に学んで、確実にお仕事を手にしませんか？ まずは無料体験からお試しください。
Webデザイン

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。 そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。 本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。 目次ファビコンとはサイトfavicon.htmlkit.comの解説サイトfavicon.htmlkit.comでFaviconを作成してみよう監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり 田島メンター！！GitHubってなんですか〜？ 田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。 大石ゆかり もう少し詳しく教えてもらえますか〜？   GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。 ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。 また、GitHubを使ってソースコードの管理を行っている企業も多数あります。   GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています 。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。 オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。 イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。 それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。 理由1：無料のプライベートリポジトリ ソースコードを管理する単位をリポジトリと呼びます。 リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。 ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。 しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。 これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。   理由2：オープンソースコミュニティに育まれたSNS機能 オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。 また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。 このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。 コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度） 開発メンバーの知見を共有する機能（Wiki、GitHub Pages） ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動） 単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。 しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。   理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。 このような環境の中から、以下のような先進的な機能が次々と誕生しています。 世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」 オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能 ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」 これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。   GitHubのアカウント登録 それではさっそくGitHubに登録してみましょう。 まずは、GitHubのトップページにアクセスします。 ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。   次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。 下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。 クイズになっており渦巻状の銀河の絵を数回選択します。 なお、このクイズは定期的に変わるようです。   決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。 ボタンを押して次に進みましょう。   このような画面になります。   登録したメールアドレスに認証のメールが届きます。 メールの内容に従いユーザー認証を行ってください。 以上でGitHubのアカウント登録は完了です。   大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？ 田島悠介 その前にいくつか知っておいたほうがいいことがあるから、教えておくね。 大石ゆかり はい、お願いします♪   [PR] Webデザインで副業する学習方法を動画で公開中GitHubを使う上で知っておきたい事前知識 早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。 ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。 事前知識1：ローカルリポジトリとリモートリポジトリ 事前知識2：コミットとプッシュとは 事前知識3：ブランチ（branch）とは 事前知識4：インデックス（index）とは   事前知識1：ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの状態を保存する場所です。 変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。 基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。   事前知識2：コミットとプッシュとは 最低限この2つは知っておきましょう。 コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存すること プッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作   事前知識3：ブランチ（branch）とは ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。 このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。 ブランチは履歴の流れを分岐して記録していくものです。 分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。   事前知識4：インデックス（index）とは リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。 そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。 逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。 忘れないようにしましょう。   GitHubの使い方 それでは使い方を覚えていきましょう。 基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。 なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。 基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。 コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init） ファイルの作成、編集を行う ファイルの作成/変更/削除をgitのインデックスに追加する（git add） 変更結果をローカルリポジトリにコミットする（git commit） ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push）   GitHubでリポジトリを作成（git init） まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new   次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。 また、リポジトリの種類を「Public」か「Private」を選択します。 ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。 最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。 必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。 次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。   ファイルの作成、編集を行う はじめに、ローカルのPC上にローカルリポジトリを作成します。 今回は「awesome」というディレクトリを作成することにします。   以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。 コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。 そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。 バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。   次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。   現在の状態を確認しましょう。 git status   結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html   ファイルの作成/変更/削除をgitのインデックスに追加する（git
Git

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML サイトfavicon.htmlkit.comでFaviconを作成する方法を現役デザイナーが解説【初心者向け】