皆さん、こんにちは。
KUROUDOです。
前回の宣伝から始まったブログサイト制作の連載ですが、早速WEBサイト制作で必要な道具（ツール）を今回は見ていきたいと思います。
前置き
それでは見ていこうと思うのですが、まず始めにお伝えしておきます。
それは、この連載を通して学ぶ内容はあくまでもWEB制作における氷山の一角であるということです。
この連載を最後まで完走したからと言って、「自分、ホームページ作れるんで！」と自信満々にはまだまだ言えない初心者であることに変わりはありません。
これを足掛かりに、自身で調べ、学び、実践し続けることが大切です。
WEB制作の勉強に終わりはありません。
どんな熟練のWEB制作者でも、分からないことがあれば自力で調べるのですから。
でも、まだまだ初心者とは言ってもしょげる必要はありません。
最初は誰だって初心者です。
これを通して、WEB制作の第一歩を歩み出しましょう。
本題
前置きが長くなりましたが、早速本題に入っていきます。
ちなみに、僕はMacを使って制作していますが、ここではWindowsでも問題ありません。
それでは道具（ツール）から見ていこうと思います。
WEB制作の準備段階で必要なのは、最低限以下の通りです。
- ノート
- 筆記用具
- メール環境（スマホやPCなど）
「え、少なくない？」と思いました？
でも実際、準備段階では本当に最低限、この3つがあれば事足ります。
まずノートと筆記用具ですが、お客様との打ち合わせでのメモ、情報の整理、ワイヤーフレームで使います。
先方にワイヤーフレームを送らないといけない場合は、手元にあるスマホ写真で十分です。
もちろん、スキャナやPCソフトなどで綺麗にしたものを送れるならそれに越したことはありませんが、あくまでも最低限。
初めてならまずはアナログでやり方に慣れておきましょう。
そのあとになって改善できないか、という段階でPCソフトなどを検討しても遅くはありません。
次にメール環境ですが、これは先方とのやり取りで必須です。
というかスマホを持っているならキャリアメールやGmailがあるので、実質無料で使えますね。
個人的なおすすめはやはりGmailでしょう。
連載の後半で登場するGoogle AnalyticsやReCAPTH v3などもGoogleアカウントを使うので、持っていない人はこのタイミングで開設しておくべきです。
より実践的な準備をしよう。
それでは必要最低限のツールから、より実践的に使えるツールにバージョンアップしてみましょう。
「さっきのアナログの件はどこ行った」と思うかもしれませんが、あくまでも最低限。そう、最低限なのです（念押し）。
WEB制作をするならPCが必須だということは皆さんも分かっていると思うので、そのPCを使ったツールで揃えていきます。
エディタ編
エディタとはWindowsやMacで言うところのメモ帳です。
ただし、標準のメモ帳では必要最低限の機能しかついていないので、無料の優秀なテキストエディタを導入しましょう。
- CotEditor（軽量なメモアプリ）
- Atom
- TeraPad
- SublimeText
- Brackets（サポート切れ）
- Visual Studio Code（コーディング用）
ここで挙げたエディタはこれまでに僕が使ってきたもので、その中でも「CotEditor」と「Visual Studio Code（以下、VSCode）は現役で活躍してます。
使い分けは、起動が早いCotEditorはメモ代わりやSVGをちょこっと書き換えたり、コードの一部を一括置き換えしたりするときに使います。
何しろ正規表現が使えるから便利ったらありゃしない。
そしてVSCodeはコーディングで主に使っています。
もちろん、○○○.txtも対応していますし、.○○○という名前（先頭がドットで始まる）でファイルを作ると非表示ファイルとしてメモ書きにも使えます。
コーディング編で説明しますが、VSCodeには豊富なプラグインがあるので、お好みの環境に構築できるのが最高です。
もちろん、WordやKey Noteなど、ここでは紹介しなかったエディタとして使えるソフトは沢山あるので、使い慣れたものを使ってください。
オンラインサービス編
続いてはネット上で使える便利なオンラインサービスです。
知らなかった人は是非ブックマークしていってください。
- Pinterest（参考集め）
- Google スプレットシート（簡易的なマインドマップ代わり）
- Google ドキュメント（Wordの代わり）
- Gmail（言わずもがな）
- Google Drive（オンラインストレージ）
- Google 翻訳（Chromeの拡張機能を導入すると、ブラウザ全体を翻訳してくれる）
- DeepL（Google 翻訳より利便性は落ちるが、翻訳精度が非常に高い）
ブラウザ編
現時点では特に指定はありませんが、Googleアカウントを持っている（これから作る）なら、Google Chromeを入れておけば良いのではないでしょうか。
このご時世、WEB制作を目指すのにInternet Explorerを使っているような人はいないと信じたいですが、もし使っているようなら今後は使うのをやめましょう。
セキュリティ的によろしくないですし、昨今はIE非対応が増えてきているので、そう遠くないうちに殆どのサイトはIEで見るとバリバリにレイアウト崩れしていると思います。
こちらも後半のコーディング編で説明する予定ですが、僕はブラウザ対応については以下の最新ブラウザで動作・レイアウト確認しています。
- Google Chrome
- Firefox
- Microsorft Edge
- Safari（Mac、iPhone）のみ
また、OSはWindows、Mac、iPhone、Androidと一通り見ています。
もし手元にこれらが揃わない場合、持っている家族や友人に確認だけお願いするのも手段の１つです。
ちなみにですが、iPhoneやiPadのChromeなどは外見はそのままChromeなどですが、中身は実質Safariなので、同じ種類のブラウザだけどiOSだけ違うのにレイアウトが思ったとおりにならないということが発生します。気をつけましょう。
終わりに
今回はここまでとします。
皆さん、いかがでしたでしょうか。
僕は高校生のころにHTMLとCSSだけの更新機能もないフリー写真素材サイトを一時期運営していたことがありましたが、そのころは管理者画面を開いてテンプレートのCSSを１つずつOn / Off切り替えながらゆっくりと覚えたのがWEB制作のスタートでした。
今は誰でも簡単にホームページやブログを使えるようになり、大分ハードルが下がったなと感じています。
ですが、それでも一般人が作れるのはWordPressやWix、STUDIOなどの決められたテンプレートからのみです。
「あんな機能がほしい」、「ここの見た目をこうしたい」という独自のカスタムは、やはりコーディングができないといけないと考えています。
前回の記事でも書きましたが、あくまでもこのシリーズの目標はブログを立ち上げることです。
でも、もう１つ付け加えるのであれば、このシリーズを通して、皆さんが独自のホームページやブログを作れるようになってほしいです。
今回の記事も含めて、今後発信していく情報が、WEB制作初心者の助けに少しでもなれたらと思います。
皆さん、こんにちは。
KUROUDOです。
前回の宣伝から始まったブログサイト制作の連載ですが、早速WEBサイト制作で必要な道具（ツール）を今回は見ていきたいと思います。
前置き
それでは見ていこうと思うのですが、まず始めにお伝えしておきます。
それは、この連載を通して学ぶ内容はあくまでもWEB制作における氷山の一角であるということです。
この連載を最後まで完走したからと言って、「自分、ホームページ作れるんで！」と自信満々にはまだまだ言えない初心者であることに変わりはありません。
これを足掛かりに、自身で調べ、学び、実践し続けることが大切です。
WEB制作の勉強に終わりはありません。
どんな熟練のWEB制作者でも、分からないことがあれば自力で調べるのですから。
でも、まだまだ初心者とは言ってもしょげる必要はありません。
最初は誰だって初心者です。
コメント