• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / 3.ホームページ制作に必要な環境

3.ホームページ制作に必要な環境

池田祐太郎 | 2013年9月28日 公開

目次

  • 1 ホームページを作り始めよう
  • 2 必要なソフトや環境
    • 2.1 必須なもの
      • 2.1.1 テキストエディタ
      • 2.1.2 ブラウザ
    • 2.2 あとからでも可
      • 2.2.1 インターネットのできる環境
      • 2.2.2 サーバー
      • 2.2.3 FTPソフト
      • 2.2.4 Adobeのソフト

ホームページを作り始めよう

ここでは、ホームページ制作を始めるにあたって必要となってくるソフトや環境をまとめました。
ここを参考にして始めるまでに制作環境を整えておきましょう。

必ず必要となるものと、ゆくゆくは必要となるもので分けました。手っ取り早く始めるには、「必要なソフトや環境」をご覧ください。

必要なソフトや環境

必須なもの

テキストエディタ

テキストエディタを使ってHTMLやCSSファイルを制作していきます。
もし今使っているパソコンがWindowsであれば「メモ帳」が標準で付いてきます。
※場所:『スタート』→『プログラム』→『アクセサリ』→『メモ帳』

しかしこのメモ帳、機能が貧弱なのと保存形式によく間違いが置きて面倒なので、このメモ帳を使うのはやめましょう。
他のテキストエディタだとさくらエディタやterapad等がおすすめです。
Macだとmiというエディタが使いやすいようです。

サクラエディタ Download

TeraPad

mi – テキストエディタ

もしくは、上記のようなテキストエディタではなく、オーサリングソフトと言われるAdobeのDreamweaverなどを用意できればHTML,CSSはもちろん他の言語も対応でき、Dreamweaver一つ立ち上げれば構成されているファイルを一元管理できるのでかなり楽になります。

はじめるときは「どのファイルがどういうふうに結びついているか」というのがなかなか理解するのが難しかったりするので、オーサリングソフトを導入できれば一番これがお勧めです。

Windows版 Dreamweaver CS6

Mac版 Dreamweaver CS6

ブラウザ

ブラウザの説明は先ほどを参照ください。
お勧めはGoogleが開発するChrome。MacであればAppleのSafariでもOKです。
実はこの2つ、内部で使用しているエンジンがwebkitという同じものを採用しています。

Chrome ブラウザ

アップル – Safari

 


 

あとからでも可

今すぐは必要ないけど、ホームページを公開したいという時に必要なものです。

インターネットのできる環境

HTMLやCSSの確認だけであればインターネットに接続していない状態でも確認できます。
しかし、それをサーバーにアップロードするためにインターネットに接続している必要があります。

※このサイトを見れているということはインターネットに接続している証拠ですね

有線でも無線でもどちらでもいいのでインターネットに接続している状態にしましょう。

サーバー

作ったHTMLやCSSをアップロードする場所です。これはイコールホームページを公開する場所になります。
無料、有料とありますが、無料のものは制約が大きかったり広告が自動で入るので、できれば有料でもレンタルサーバーを借りることをオススメします。

有料といってもロリポップの一番安いプランだと月額105円、当サイトも使用しているさくらサーバーの一番安いプランだと125円と、ほとんど無料に近いくらいの値段ですので、スキルアップにもなるので是非レンタルサーバーを借りてみましょう。

ロリポップ!

さくらのレンタルサーバ ライト

FTPソフト

作成したHTMLファイルやCSSファイルをサーバーへアップロードするためのソフトです。
※FTPとはFile Transfer protocolの略で、ファイルを転送するための通信規格

もちろんサーバーにアップロードしたファイルをダウンロードすることもでき、サーバーを借りたらマストなソフトです。
Windowsだと初心者にはFFFTPがお勧め、とよく言われますが僕は断然Filezilla(ファイルジラ)をお勧めします。

なぜかというと、FFFTPはよくエラーでアップロード途中で止まったりするし、少し重いです。ずっと僕はFFFTPを何年も使ってきた上でFilezillaに乗り換えた経験の上、現在はFilezillaで快適に使っています。

実際薦めた方からも「ずっとFFFTPを使ってきたが、Filezillaに乗り換えて使いやすくなった」という声があります。

FileZilla – Client Download
※Mac用も有り

Adobeのソフト

やはり外せない、初心者にこそ使っていただきたいアドビのソフト群。
Photoshop, Illustrator, Dreamweaver等、デザインからコーディングまで、Adobeソフトだけで制作環境は完全に揃ってしまいます。
CSというバージョンを定期的に更新していましたが、バージョン6以降はCreative Cloudという(通称CC)バージョンに切り替わり、買い切りタイプではなく毎月の定額制になりました。

当初アドビが発表した月額制に対して否定的でしたが、スピードの早い制作環境をアップデートしていくためには毎回買うのも大きい出費なので、制作環境を最新に保つ税として考えると月額5000円前後というのは投資と捉えられるようになりました。

とはいえ、始めるにあたっては小さくない出費なので、例えばまずはDreamweaverなど使うものだけ使用すれば年間プランで毎月2200円でした。

体験版もあるので、まずはテキストエディタでやってみて「ちょっと試してみようかな」というところでためしてみることをお勧めします。

次の講座:4.HTMLファイルを作ってみよう←目次に戻る
メールコンサルティング
WordPress保守管理サービス

カテゴリホームページ制作無料講座

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

2.前提知識
2013年9月25日
カテゴリー: ホームページ制作無料講座
1.はじめに
2013年9月25日
カテゴリー: ホームページ制作無料講座
初心者のためのホームページ制作
2013年9月25日
タグ: css, HTML
カテゴリー: ホームページ制作無料講座

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 2024-2025年末年始の営業のご案内
  • WordPressのプラグイン自動更新のロールバック機能が正しく動くのか確認してみた
  • 遅延読み込み開始させる画像を変更させるWordPressカスタマイズ
  • WordPressで特定の画像やアイキャッチ画像をlink rel=”preload”に設定する
  • WordPressのプラグインがどのくらい表示速度を重くさせるのか22個のプラグインで検証

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android ChatGPT CMS css DALL-E elementor gmail google workspace Gutenberg HTML iPhone jQuery Mac Photoshop php SEO SNS ssh SSL Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン セキュリティ ツール ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2025 high five create All rights reserved.