読者です 読者をやめる 読者になる 読者になる

明日のための備忘録

きっと明日使うかもしれないことをまとめる備忘録

制作につかってるもの

              f:id:xleoleox-s:20160405021759p:plain

デザインの仕事をしていて、よく学校の後輩から「何をどうすればいいのかわからない…」と相談を受けることが多いのですが、おそらくそれは過程うんぬんの前に制作環境が整っていないから起こるのではないかと思ったりしました。

そこで、自分がWeb制作の際に使用しているツールやおすすめのツールを紹介してみようと思います。

 【自分の制作環境を知る】

ソフトをDLするときに

  • 自分のPCの種類(PCのメーカーやデスクトップなのかノートなのか)
  • スペック(おもに容量)
  • プラウザの種類(IESafariなど)

などなど、そのソフトがDLして使えるのかどうかを調べてから購入したり、あるいは購入画面前にある注意書きを読んで購入したりしますよね?

それって意外と当たり前だと思っているけれど大事なことだったりします。

これを知ることはつまり、自分のPCではどれだけのことができるのかということなので、それに合わせたソフトやツールを使用していかないと折角作ったデータがクラッシュしてしまったりするわけです。

 

今回の記事を書くにあたって紹介するソフトは基本的にMac対応になります。(書いてる人のPCがMacのため)

Winで使用できるソフトやツールも中にはありますが、必ずしも使えるわけではないので予めご了承ください。(できる限り両方のおすすめを書いていきますね)

 

テキストエディタ

サイトを制作するうえでは絶対に外せないものですね。

Winでは「メモ帳」Macでは「テキストエディター」が標準で入っているので、それを使用してサイトを制作している方も多いのではないでしょうか。

私の知人はWinユーザーなのですが、大半がメモ帳で編集しているとのこと。

デフォルトで入っているだけではなく手軽に使えるというのは大きいポイントです。

しかし、Web制作用にもちろん作られているわけではないので、書き込み量が増えれば増えるほどどこに何が書いてあるのかわからなくなってきます。

少しでもストレスを軽減するためにも専用のテキストエディターを使用することをおすすめします。

 

 Brackets

f:id:xleoleox-s:20160406161724p:plain

 ≫公式HP 

brackets.io

 Adobe製の無料エディターです。

シンプルなデザインになっているので、私も最初はこちらを使用していました。

今でも恋しくなるくらいには使いやすいので、こういったエディターを使用する初心者さんにも使いやすいのではないかと思います。

 

Emacs

f:id:xleoleox-s:20160406162815p:plain

 ≫公式HP

gnupack Users Guide

Win・Mac両方対応しているカスタマイズ性に優れたテキストエディターになります。

大半がショートカットキーで入力できるので、ショートカットを把握さえすればかなり早く入力できるようになるのではないかと思います。

「どんな役割をするかを覚えるので精一杯で、スペルなんて覚えられないよ…!」そんな初心者ユーザーさんにおすすめです。

余談

ちなみに私は現在Codaというエディターを使用しています。

Mac専用なので参考までに。

そしておすすめをまとめている記事を紹介しておきます。

 

 

www.geekjob.jp

いくつか使用してみてから決めてもいいかもしれません。

 

グラフィックツール

Webデザインをする際に必要となる素材を制作したり、自分で撮った写真を加工してサイトデザインに使用したりと、意外とWeb制作にそういった「素材」と呼ばれるものが多いのはみなさんもご存じのはず。

Photoshopをはじめ、IllustratorGIMPなど。

特にこだわりがなければお持ちのイラスト制作用のソフトで十分事足りるかと思います。

ただ、デザイナーを本格的に目指すのであれば、Adobe系列のツールは必須だと思います。

 

ワイヤーフレーム

突然の用語かと思われがちですが、簡単に言うと「サイトを制作するための設計図」です。

「ここにメニューをおいて、ここを押せばこのページに飛んで…」といった構想を図式化したものになります。

ここでしっかり構想を練っておけば、後々「こうしとけばよかった!」なんてことが少なくなるはず!

Cacoo

f:id:xleoleox-s:20160406165933p:plain

cacoo.com

オンラインのワイヤーフレーム作成ツールです。

学生の頃から使用しているので体に染みついてしまった私は今でもこちらを使用させていただいています。

プランによって制作できるシート数(設計図の枚数)が決められているのですが、無料プランでも十分に制作できるかと思います。

他、便利な無料ワイヤーフレーム制作サイトさんはさまざまな記事でも紹介されていますので自分にあったものを探してみてはいかがでしょうか。

 

liginc.co.jp

 

ブラウザー

WinではIEが、MacではSafariが標準搭載されているかと思います。

閲覧するためには必須と言えますね。

これまでにサイトを制作したときがある方は、自身の作ったデータをダブルクリックすると自動的に普段使用しているブラウザーで開かれるのをご存じではないでしょうか。

ブラウザーによっては動作や性能が違い、それぞれに得意不得意があります。

折角なので自分の好みにあったブラウザーを探してみてはいかがでしょうか?

(ちなみに私はChromeを普段から使用しています)

 

f:id:xleoleox-s:20160406165039p:plain

www.google.co.jp

そのほかの代表的なブラウザーとしては

でしょうか。

 

要は自分が制作しやすい環境づくりを!

結論は極論染みてますがつまりはこういうことかと思います。

検索すれば出てくる便利な世の中ですので、ご自身の制作スタイルにあったツールを是非探してみてください。