Web制作でよく使うツール・参考サイトをまとめました【初心者向け】

webmaking-tool-site

Web制作をする上で、よく使うツールをまとめました。

「おすすめされているツールが多すぎてよくわからない」という方向けの記事です。

 

この記事を書いている僕はWeb制作をしており、仕事で実際に使っているツールばかりなので、参考になるかなと思いますm(_ _)m

この記事の内容

  • Web制作でよく使うツールまとめ
  • Web制作をする上で参考になるサイト

-スポンサードサーチ

Web制作でよく使うツールまとめ

Web制作でよく使うツールまとめ

Web制作では、いろんなツールを使います。

よく使うツールをまとめると、以下のとおりです。

Web制作でよく使うツール

  • デザインツール
  • テキストエディタ
  • コード整形ツール
  • FTPソフト
  • コミュニケーションツール

順番にまとめていきますm(_ _)m

デザインツール

Web制作では、Adobeのデザインツールをよく使います。

主に使うのは、PhotoshopとIllustratorですね。

◆Photoshop

素材の書き出しや写真素材の加工などに使います。

正直、直感的でなくて使いにくいのですが、業界標準のツールなので使えるようにしておきましょう。

凝ったデザインをするわけでなければ、そんなに難しい機能は使わないので、すぐに使えるようになるかと思います。

◆Illustrator

イラスト・ロゴデータの書き出しに使います。

僕はロゴデータの書き出しにしか使ったことがありません。

Adobeのソフトを通常より安く使う方法

PhotoshopやIllustratorには、買い切りのパッケージはなく、月/年単位での課金制です。

プランとしては、こんな感じ↓

AdobeCreativeCloudプラン

引用:Adobe Creative Cloud公式サイト

AdobeにはPhotoshopとIllustrator以外にも多くのソフトがあるのですが、月額5,400円くらい払わないと、すべてのソフトが使えません。

 

ただ、Adobeソフトの使い方の通信講座を受けると、通常64,800円のところ、29,800円ですべてのソフトが使えるようになります。

なぜ安くなるのか不思議ですが、「いろんなソフトを使いたいけど、月額5,400円は高い」という方は、ぜひ通信講座経由で購入するといいですね。

テキストエディタ

HTML/CSS/JavaScriptなど、コードを書く時にはテキストエディタを使います。

どれを使っても大丈夫です。

僕は見た目がシンプルなSublime Textを使っています。

コード整形ツール

コードを書いていると、段落(インデント)や改行がバラバラになることがよくあります。

書いた直後はよくても、あとで見返した時にメンテナンス性の低いコードになってしまいますので、整形ツールを使ってキレイに仕上げましょう。

コード整形ツール

余裕があれば、圧縮(minify)したファイルを使うと、ページ速度の改善に繋がります。ここでは詳細を省きますが、気になったら検索してみてくださいm(_ _)m

FTPソフト

パソコンの中のローカル環境にあるファイルをサーバーにアップロードしたり、サーバーにあるファイルをダウンロードするためには、FTPソフトを使います。

FTPソフト

僕は家ではFFFTPで、職場ではFileZillaを使っています。

個人的には、FFFTPの方が直感的で使いやすいですね。

コミュニケーションツール

仕事仲間やクライアントと連絡を取る上では、よくチャットツールを使います。

チャットツール

どちらを使うかは好みですが、両方使われているので、一応どちらも触っておいた方がいいかなと思います。

ChatWorkの方が直感的で使いやすいです。Slackはエンジニア向けですね。

Web制作をする上で参考になるサイト

Web制作をする上で参考になるサイト

Web制作では、いろいろなサイトから素材や情報を収集します。

この記事では、僕が仕事でもプライベートでもよく見ているサイトをまとめました。

商用利用可能な写真素材

写真素材のサイト

  • Unsplash:海外の落ち着いた感じの写真が多いです。このブログでもよく使っています。
  • Pexels:同じく海外の写真素材のサイト。
  • ぱくたそ:日本人の素材が欲しくなったらこちら。

なお、商用利用可なものと、商用利用不可なものがあるので、使用する前によく規約を確認しておきましょう。

参考までに、上に挙げたサイトは商用利用可です。

Webデザインのイメージ

ゼロからWebサイトのイメージを考えるのは大変なので、よくPinterestに挙がっている画像を参考にしています。

pinterestのイメージ

検索窓に「Webデザイン 〇〇」「旅行サイト デザイン」などのキーワードを打ち込むと、いい感じのサイトデザインが上がってきます。とても便利です。

特にWebデザイナーであれば、Pinterestを眺めて考えることが良い勉強になると思うので、日々チェックするのがおすすめ。

プログラミング・Webデザインの参考サイト

  • Webクリエイターボックス:Webデザインのトレンドから技術まで幅広く
  • かちびと.net:Webデザインにおけるツールやフレームワークを紹介されています
  • コリス:Webデザインのツールや参考書籍など
  • UX MILK:UXについての参考情報
  • サルワカ:Webデザイン・HTML/CSS/JSの書き方など。コードの書き方に困ったらココ

Webデザインやプログラミングの技術は進歩が速いので、日々チェックするのが大事です。Feedlyに入れておいて、朝イチでチェックするのがおすすめ。

目の前の仕事をこなすばかりだと、つい視野が狭くなりがちなので、情報は広く収集するようにしましょう。

最初は大変かもしれませんが、ずっと見続けると段々楽しくなってきますよ。

Web制作には情報収集と実践が大事

Web制作において、よく使うツールとよく見るサイトをまとめました。

Web制作は、ものすごい速さで技術やトレンドが進み続けるので、情報収集が欠かせません。

また、集めた情報を身につけるために、とりあえず触ってみるのが大事ですね。

 

「覚えることが多くて大変だ」と思うかもしれませんが、その大変さというか速さも魅力のひとつなので、楽しんでやっていきましょう(^_^)

なお、このブログに書くにはボリュームが足りない情報については、Cloud9という別ブログで発信していますので、ぜひチェックしていただければと思いますm(_ _)m

スポンサーリンク
スポンサーリンク