• 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保守管理サービス

Filed Under: ホームページ制作無料講座

池田祐太郎

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

この記事と関連する記事

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

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. git pull してもエラーが出てファイルが反映されないときの対処法
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ
  6. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • テスト環境や開発環境を用意したら有効化しておきたいデバッグモード
  • WordPress において PHP 8.1 に更新していいかどうか検証
  • アプリを切り替える便利なショートカット
  • なぜ WordPress はバックアップが必要なのか
  • WordPress の Git 管理では対象とするファイルやフォルダはどこまで含めるのがいいのか

カテゴリー

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

タグ

Android BtoC CMS css Dropbox Paper elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac php SEO shopify SNS Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket お知らせ アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカット スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.