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

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

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

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

webディレクション編

MindNode

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

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

 

最初はこんなのが、

こんなのになったり、

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

 

Evernote

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

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

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

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

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

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

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

こんな感じだったり、

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

Adobe XD

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

google drive

[blogcard url=”https://www.google.com/intl/ja_ALL/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年、そろそろ新しいツールやソフトを学習する必要性を感じています。。。

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

ホームページのことでお困りではありませんか?

お客様のホームページの集客や売上を伸ばすことまで考えて提案ができるweb制作会社は多くはありません。グリッジは数少ないその1つです。

グリッジはただウェブサイトを作るだけではなく、徹底的に「誰に」「どうやって」「届ける」かを追求し、クライアントの課題解決に向き合うweb制作会社です。

お困りのことがあればお気軽にご相談ください。

Share この記事をシェアする

Writer この記事を書いた人

清水 信行 代表 / デザイナー

1989年岡山県生まれ、岡山在住。制作会社に3年勤務した後に独立し、その後2年フリーランスとして活動後、法人化。5年間で制作したwebサイトは200件以上で、現在はディレクションからデザイン、コーディング、コンサルティングまでweb制作業務全般を幅広くこなす。

この人が書いた記事をもっと見る

Contact

ウェブでのお困りごとは、
もうご安心ください。

ホームページでのお困りごとや、ウェブ集客やSNSに関することなど、
少しでもお悩みならお気軽にご相談ください。

050-3612-7847

10:00〜18:00 (定休日:土日祝)

Feature

グリッジの選ばれる理由

Works

今までに制作してきた
実績の一部をご紹介します