好きなモノだけに囲まれて生きるライフハック

Webデザイン・コーディングをする際に実際に僕が使っているツール・アプリ15選

webデザイナーになる方法 18/10/25
TOP > 記事一覧 > ホームページ制作 > webデザイナーになる方法 > Webデザイン・コーディングをする際に実際に僕が使っているツール・アプリ15選

人気記事全くの未経験から独学でwebデザイナーに転職する為の方法【完全版】

人気記事断言する!最高のseo内部対策ツール、オロパス社のパスカルがやばいぐらい使える

人気記事オンラインで受講可能なIT・プログラミングスクールのオススメ4選

人気記事webデザイン会社で働く僕が選ぶコスパ最強のレンタルサーバー3選

一人で仕事をやりだしてから半年が経ちました。そして今まで作ったサイトは3つと現在進行中のものが10ぐらい。

前職にいた頃は一人でサイト制作を全て自分でやるなんて考えていませんでしたが、やればなんとかなるもんですね。

今回はそんな一人でディレクション・デザイン・フロントエンドコーディングまでやっている僕が愛用しているツールを紹介します。

webディレクション編

MindNode

apple用のマインドマップです。マインドマップは過去色々使ってきましたが、macとiphoneで同期できて、かつ操作性が優れていて、デザインが良い、というのがこれしかなかったので現在は愛用しています。

基本的にはヒアリングシートとしてこれを使っています。営業の人やコンサルとしてお客さんの窓口に立っている人から僕が仕事を受け取る際に、顧客情報がないとデザインもできないし見積もりも作れないので、まずこれを全て埋めてから仕事に着手しています。

 

最初はこんなのが、

こんなのになったり、

こんなのになったりします。超便利。

 

Evernote

みんな使っているエバーノート。最近デザインがだんだんもっさりしてきてあんまり使いたくないんですが、惰性で使っています。

とにかくあらゆる情報をここに溜め込んでいます。

サイト制作ならだいたい議事録として使うことが多いかな。

ただ一番僕がこれを活用しているのが、ワイヤーフレームを作る時です。

apple pencilでワイヤーフレームを書けるアプリを色々探したんですが、個人的にはただ書けて同期できれば良いので、evernoteが一番良いということになりました。

これはマジでオススメです。手書き派は是非。

僕は誰かにデザインをしてもらう際には手書きでざっくり書いた後、AdobeのXDで清書します。

こんな感じだったり、

こんな感じでざっくり書いたものを後からデザインします。

Adobe XD

これは完全にワイヤーフレームを書く用のアプリですね。確かにイラストレーターをいじるよりは簡単にできるのでオススメではありますが、これでバリバリデザインをしようとはあまり思わないかな〜。。。じゃあイラレ使えよってなっちゃうんで、これはあくまで配置説明だったりって感じですかね。

google drive

基本的に全ての制作ファイルはgoogle driveに入れています。

これで常に同期しておけば、パソコンが吹っ飛んだ時にも慌てずに済みます。

またgoogleスプレッドシートを使って見積もりとか出してます。

Fantastical 2

スケジュール管理はこのカレンダーアプリでやってます。googleカレンダーを同期しているのですが、googleカレンダーはどうしてもブラウザ上なので、見にくかったりかゆいところに手が届かない印象があるので、今はこれを使っています。

今は一人で制作することが多いので、わざわざガントチャートなんかを組まなくても特に問題ないというのが実情で、ざっくりしたスケジュールだけを最初にこれで引いて、クライアントへ共有しています。

Trello

これはアプリというかブラウザ上のアプリケーションですね。

細かいタスクをtrelloに全て入れています。まずはfantasticalで今日、今週あたりのスケジュールを確認し、その後trelloを見て漏れがあれば入れ直し、今日のタスクに落とし込む感じです。

プライベートも思いついたことも全てここに入れてます。超絶便利。

Chatwork

お客さんやデザイナー・コーダーさんととやり取りする時とかはチャットワークを使っています。

まあ〜なんでもいいんですが、LINEでやり取りするよりはデータも長期で補完してくれてるんで、こっちのほうが便利ですね。

skitch

evernoteの会社のアプリの一つなんですが、意外と便利です。

デザインするほどでもないけど、注釈で指示したい時とか、何かを説明する時とかにさっと立ち上げて使えるのが便利ですね〜。

webデザイン編

Inboard

これはwebデザインでかなり役に立ってますね〜。

webデザインのスクラップサイトで最近の流行りのデザインを見たり、クライアントの方向性(カラーだったりテイストだったり)に近いデザインを見て、参考にしている時にいちいちブラウザで見るのが面倒くさいので、全画面キャプチャソフトで画像化して、全てこのソフトに放り込んでいます。

そうすると、こうしてクライアントごとに分けれたりするので、デザインやレイアウトを練る時にとても便利です。

こんな感じや、

こんな感じでテイスト、業種別にもまとめることはできます。

Adobe Illustrator

これでデザイン組んでいます。

もう最近はこれで全体のレイアウト、テイストを作って細かいところはブラウザ上で調整というのが多いですね。Illustrator上でそんなに細かい調整はしない。web上で作れないものは別ですが。

Adobe Photoshop

画像の加工がメインです。クライアントさんからもらった写真の色が微妙だったり、背景差し替えたりしないといけないレベルの際はこれを使って調整しています。

フロントエンド・コーディング編

Adobe Dreamweaver

コーディングエディターですね。ネット上ではDreamweaverはあまり人気がないですが、僕からするとそこまで重くもないし、そんな使い勝手が悪くないんで、まあ別にいいかなって感じで使っています。

Parallels Desktop

仮想WindowsOSを起動できるソフトです。Bootcampでもいいんですが、あれだと使うたびにいちいちmacをスリープしてやる必要があるらしいので、それよりはParallelsだと別desktopで見ることができるんで、こっちの方が良いです。便利。

EdgeとIEの動作確認のためだけに購入しました。笑

まあ後は検索順位チェックツールのGRC起動するぐらいですね。

FileZilla

FTPソフトです。色々ありますが、僕はこれが一番落ち着いたので、これを使っています。多分FTPソフトは何でもいいと思いますが、相性ですかね。

Local by flywheel

これは自分のローカルでwordpressを簡単に立ち上げれて、ローカル上でコーディングできるスグレモノです。

たまーに使っていますが、結局先方デモサイトチェックしてもらう時なんかはUPしないといけないんで、割と二度手間感を最近感じています。

最後に

以上です!

書き出したら意外と多かった。。。

参考になりましたでしょうか?

ただこのツールもほとんどずっと使っているものなので、2018年、そろそろ新しいツールやソフトを学習する必要性を感じています。。。

時間をとってやるしかないですね。

それでは!

 

ちなみにadobeのソフトを買うなら、デジハリの学割プランになって買うのがオススメです。半額レベルになります。

 

人気記事全くの未経験から独学でwebデザイナーに転職する為の方法【完全版】

人気記事断言する!最高のseo内部対策ツール、オロパス社のパスカルがやばいぐらい使える

人気記事オンラインで受講可能なIT・プログラミングスクールのオススメ4選

人気記事webデザイン会社で働く僕が選ぶコスパ最強のレンタルサーバー3選

関連記事はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)