【初心者向け】サイト作成に必要なツール

駆け出しのwebデザイナー、webコーダーや、これからweb業界のエンジニアを目指す方にとっては、どのソフトが良くてどのツールが便利で、、、ということは当然ながら知らないことの方が多いだろう。

ここではweb制作の現場で必ずと言っていいほど使われているソフト、便利なツールを備忘録として記す。

 

 

 

必ず使われているソフト編

ーエディター

さて、まずはコーディングするためのエディタについてだが、web制作の現場で最も多く使われているソフトはDreamweaverだ。
しかし、Dreamweaverはadobeの有料ソフトで初心者やこれから勉強しようとしている方には少しハードルが高いように思う。
（月額数千円〜1万円はかなりきついのではないだろうか。。。）

 

 

無料で使えて高機能のエディタもいくつかあるので備忘録としてここに記しとこうと思う。

• Visual Studio Code -Microsoft-（mac、winともに利用可能）
• Atom（mac、win共に利用可能）
• Brackets（ブラケット or ブラケッツ）
• Sublime Text（サブライムテキスト）

 

 

他にも無料で使えるエディタがあるので一応紹介しておく。

• TeraPad（テラパッド）（Windowsのみ）
• サクラエディタ（Windowsのみ）
• Notepad++（ノードパッドプラスプラス）
• CotEditor（コットエディタ）（Macのみ）
• mi（ミ）（Macのみ）
• モウ（Macのみ）
• xcode（Macのみ）（macのAppストアよりインストールできます。）

 

 

 

 

 

ーサーバーー

初めてサイトを作るにあたり、次に用意しなければいけないのは『サーバー』だ。
作成したhtmlデータやcssデータなどをサーバーにアップロードすると、firefoxやchromeやsafariなどのブラウザでサイトを表示することができるようになる。
（サーバーにサイトデータをアップロードするために後述の『FTPソフト』を使用する。）

 

初心者webデザイナー、コーダーならいきなり有料のサーバーを契約する必要は無いと思う。

 

無料で使えるサーバーを備忘録ととして下に記す。

• xdomain（ｘドメイン）
• ウェブクロウ（無料レンタルサーバーはサービス終了とのこと・・・）

 

ウェブクロウは管理人が初めて契約したサーバーで、無料のサーバーがあると知ったときは度肝を抜かれたことを今でも覚えています。

 

そもそも広告無しで無料でサーバーが借りられていたことが奇跡だったのでしょう。

ウェブクロウも商売ですから、このまま無料で続けていても採算が合わないでしょう。

 

まぁ、まずは無料でリストを集めて有料のサービスを開始する、というのはよくある戦略なので気にせず行きましょう。

 

 

さて、ゼロからサイトを作る練習がてら、エディタもサーバーもその他ツールもすべて無料で、「まずはやってみる」ことが重要だと思う。

ぜひ、何か手に取って「はじめてみる」ことからはじめてみてください。

 

 

 

ーFTPソフトー

FTPソフトとは、先ほど述べたサーバーにサイトデータをアップロードするためのツールである。
こちらもいくつか種類があるので備忘録として記しておく。

 

• FileZilla（mac、win 共に利用可能）
• FFFTP（Windowsのみ）

 

ちなみに、管理人はmacもWindowsも両方使っているので両方使えるFTPソフトである、「FileZilla（ファイルジラ）」を好んで使っている。

また、FileZilla（ファイルジラ）は同時転送ファイル数を１個から１０個まで、自由に設定できる。

 

編集　＞　設定　＞　転送　

を開くと・・・

 

「同時転送」の欄に最大同時転送数を設定できる欄があるのでこれを１～10まで、お好みの数に変えることができる。

 

ただし、少し注意が必要だ。

 

同時に転送するファイルの数が多いということは、それだけサーバーに負荷がかかるということだ。

 

事業としてサーバーをレンタルしている業者のサーバーはこの程度ではびくともしないかと思うが、個人のサーバーに転送する際は少し注意が必要になるということは覚えておいたほうがよいだろう。

 

 

 

必ず使われているツール編

サーチコンソール

サーチコンソールとはGoogleが提供している、Google検索にヒットしやすくするためのアドバイスをしてくれるツールだ。

 

 

どのようなアドバイスをしてくれるかというと、、、

• メタ情報の重複
• クロールエラー
• サイトマップ
• インデックス数の確認
• 構造化データ

 

 

メタ情報の重複は、タイトルやディスクリプションが重複しているページがあることを警告してくれている。

 

クロールエラーは、google検索にインデックスはされているのにアクセスできないページ、またはファイルがあることを警告してくれる。

 

サイトマップは、サイトマップページとは、また別のファイルです。
xmlサイトマップという、検索エンジンが新しく追加されたページを認識してくれるのに役立ちます。

 

インデックス数の確認は、作ったページがちゃんとグーグルにインデックスされたかを確認できます。

 

構造化データとは、検索エンジンで何かを検索したときに検索結果一覧ページにパンくずリストや販売価格、お店の評価（★４など）などの情報を検索結果ページに表示させることができる設定です。

サーチコンソールで構造化データの設定ができるわけではありませんが、設定した後にちゃんと構造化データが反映されているのかを確認するために使うことができます。

構造化データの作り方はこちらを参考にしてみるとよいでしょう。

 

参考：

https://blog.core-j.co.jp/structured-data

https://www.seohacks.net/blog/seo-tech/1191/

 

 

 

アナリティクス、タグマネージャー

アナリティクスもGoogleが提供しているツールだ。
サイトへアクセスしたユーザーの情報を収集・解析するためのツールである。

 

そして、Googleが提供しているアナリティクスのようなサービスは多く存在しているが、それらを一括管理できるのが『タグマネージャー』というわけだ。

 

 

 

 

 

 

おまけ

 

SEOチェキ

http://seocheki.net/

サイトが検索エンジンにインデックスされているか（検索結果に表示されているかどうか）、
何のキーワードで検索されれば何位に表示されるか、
そのページでどのキーワードを何回使用しているか、

 

表示速度解析

https://developers.google.com/speed/pagespeed/insights/

SEOチェキの下の方にリンクがあり、PC表示の時、スマホ表示の時のページ表示速度に関する点数を見ることができる。

また、ページの表示速度を速くするためのアドバイスをくれたり、ソースデータの改行やスペースを削除し最適化したデータや、最適化して軽くなった画像をダウンロードできる。

それをダウンロードしたらそれぞれの元データを上書きすればページの表示速度が速くなる。
※上書きした後キャッシュが残っている可能性が高いのでスーパーリロードして確認してみよう。
（スーパーリロードはWindowsでは『Ctrl』+『Shift』+『R』、
Macでは『command』+『Shift』+『R』だ。）

 

 

 

 

 

 

まとめ

今回記したツールは、web業界で確かによく使われる。

そして非常に便利だ。

 

Googleに好かれるサイト作りにはSEO対策は必須だ。

SEO対策を意識したサイト作りはwebデザイナー、コーダーにとってはぜひとも身に着けたいスキルだ。

しかしその前にツールを使いこなしてしまおう。

 

良いサイトは良いツールから。

 

様々なツールを使いこなし、良いサイトを効率よく作ることができればweb業界で食っていくための第一歩は踏み出していることだろう。