非デザイナーの僕がデザインぽいことをする時に使う便利なツール18選
※はてブの総合ホッテントリと、noteの公式マガジンに入りました！
こんにちは。Kazutaka Shimizuです。
元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作り起業しました。
最近は創業した会社を離れ、Anycloudという別の会社を立ち上げて経営する傍ら、プログラミングを独学した経験をこちらのTwitterで発信しています。
先日下記の記事を執筆しました。
はてブが800以上つき、noteの「先月もっとも多くスキされた記事」の一つにも入り、多くの方々に読んで頂きました。
（本当にありがとうございます...）
記事の中ではデザインやマークアップ、インフラ周りのハードルを下げるツールをご紹介したのですが、特にデザインの部分に関するツールは反響が大きく、ここで取り上げたもの以外にも便利なものがあればぜひ教えて欲しいというご連絡が多数ありました。
僕自身は冒頭にも書いた通り、PMやエンジニアとして仕事をすることが多く、デザインの知識も経験も、そしておそらくセンスもありません。
しかしサイドプロジェクトとして個人でプロダクトを作ったり、業務の中でも
「これデザイナーにお願いするほどじゃないんだけどな.....」
というデザイン優先度の低い機能の追加や修正などをすることはたまにあるので、今回はそういった時によく使っていたり、最近見つけた便利なツールをご紹介しようと思います。
ちなみに今回の記事のアイキャッチは、@ag_ayakanに作ってもらいました！
■目次
参考になる綺麗なデザインのサイトが集まっている「イケサイ」
一流のデザイナーの作品だけが集まっている「Dribbble」
複数のギャラリーサイトを跨いで検索できる「Muzli Search」
そのサイトの過去のデザインが見れる「Wayback machine」
公開されてるサイトのサイトマップを自動で作れる「VisualSiteMap」
自分や競合のサイトを分析する時に便利な「Flawless Feedback」
PhotoshopやIlustratorより遥かに簡単にバナーを作れる「Canva」
マークダウンっぽい文章で画面遷移図を作れる「guiflow」
デザイン作成から自動でコーディング、サイト公開までできる「Webflow」
手書きのモックを自動でデザインやコードにおこしてくれる「uizard」
アプリのスクショからコードを出力できる「Shots」
デベロッパーツール よりも見やすい「CSS Peeper」
Macの画面上に物体の大きさを測れる定規を表示する「Linear」
写真から使われてるフォントを自動で特定してくれる「WhatTheFont 」
好みの色を選択するだけでカラーパレットを生成してくれる「Palettable」
画像からカラーパレットを生成してくれる「Color Palette Generator」
様々な素材サイトを横断検索できる「Morguefile」
500種類以上の背景パターンをダウンロードできる「Subtle Patterns」
イケサイ
非デザイナーがデザインをする際に一番大切なことは
「自分の感性だけに頼らず、既存の別のプロダクトのデザインを参考にすること」
たと思っています。
デザインの基礎すらわかってない自分が無理にオリジナリティを出そうとすれば、下手すればとてもクオリティの低いアウトプットになってしまいます。
しかし、すでに世の中にある優秀なデザイナーさんがデザインしたものを参考にすれば、知識がなくとも最低限のクオリティを担保することができるからです。
一つのサイトのデザインを完全に真似してしまうとそれはパクリになってしまうので、例えばヘッダーの部分はサイトAのレイアウトにサイトBの色合いを、メインビジュアルはサイトC、ボタンのデザインはDから、といった具合に、いくつかのサイトを組み合わせて考えていくことをおすすめします。
そうしてく中で全体のバランスを調整したり、ここもっとこうした方がいいな...という細かい部分を修正していくだけでも、オリジナリティは出てきます。
こうした参考になるデザインを探す時に便利なのが、イケサイのように綺麗なデザインのサイトを集めてくれているギャラリーサイトです。
多くのギャラリーサイトは、サイトのジャンルや色合いなどの条件で検索をかけることもできます。
ギャラリーサイトごとに集めているデザインに特色があるので、色々のぞいてみるといいでしょう。
ブブンデザインのように、ヘッダーやボタンなどWebサイトの特定のパーツごとにデザインを検索、閲覧できるギャラリーサイトもあります。
複数のサイトのデザインを組み合わせるようにすると、ヘッターだけ、ボタン周りだけ参考にするサイトを探したいな、なんてこともよくあるので、そういった時に使い勝手が良いです。
また、余談ですが既存のサイトを参考にすると、デザインの部分だけでなくマークアップのコーディングも楽です。
HTMLやCSSは、他社のソースコードをデベロッパーツールなどを使って簡単に見ることができるため、思い通りの見た目にならない時は元のサイトのHTMLやCSSを参考にすることができるので解決しやすいと思います。
Dribbble
Dribbbleはデザイナーが自らの作品をシェアすることができるSNSです。
招待制を採用しており作品を投稿できるのは一握りのデザイナーのみなため、非常にクオリティの高いデザインばかりが集まっています。
イケサイのようにすでに公開されているサイトではなく、画像やデザインデータが投稿されており、ダウンロードすることができます。
サイトやアプリだけでなく、ロゴやバナーも質の高いものが揃っており、空き時間などに眺めてていても面白いサイトです。
Muzli Search
Muzli Searchは、先ほど紹介したDribbbleやPinterest、Behanceなどにアップロードされている作品や、素材サイトなどに掲載されてる画像を横断して検索できる検索エンジンです。
「Landing Page」「MobileApp」といったキーワードで検索できるのは当然なのですが、個人的にすごく便利なのはカラーコードや色の名前などでも検索をかけれることです。
例えば下記は、黄色が使われているランディングページのデザインを検索しています。
選択したデザインのカレーパレットを表示したり、同じような配色のデザインを検索することも可能です。
検索に引っかかったものだけでなく、自分でアップロードした画像に対してもカラーパレット生成し、似た配色のデザインを検索することができるため
「このランディングページの配色すごくいい感じなんだけど、ランディングページじゃなくてモバイルアプリのデザインを参考にしたいんだよなぁ...」
なんて時には、そのランディングページのスクリーンショットをとってカラーパレットを生成し、似た配色のモバイルアプリのデザインを検索することもできます。
Wayback Machine
結構前に見たサイトだけで、今作ってるサイトのイメージにぴったりだから参考にしよう、そう思って検索してみると大幅にデザインがリニューアルされていたり、そもそも閉鎖されていることもあります。
そんな時はWayback Machineを使いましょう。
サイトのURLを入力するだけで、そのサイトの過去のデザインやコンテンツを見ることができます。
例えば2005年のFacebookのデザインを調べてみましょう。
カレンダーからデザインをみたい時期の日付を選択すると、当然ですが今とは大きく違ったデザインのログインページが表示されます。
また余談になってしまいますが、こうして他サイトの過去のデザインやコンテンツを見れると、デザインだけでなくどんな戦略でどんな機能を採用してきたかなども推測することができます。
例えば、同業界の他社サイトのデザインがどう変化したかを追ってみると、最初はAのデザインを採用していたが、途中でBのデザインに変え、またAのデザインに戻すという変化があったとしましょう。
これはAとBのデザインをテストしてみて、Aのデザインの方がユーザーのうけがよかった可能性があります。
であれば、同業界で近いターゲットにアプローチする自分のサイトでもAの路線でデザインを考えた方が良い結果が出るだろうし、ターゲットにはBよりもAの方が刺さるというインサイトを自分でテストせずに手に入れることができます。
なので僕はデザインだけでなく機能や事業を考える上でも、競合サイトや最近流行ってるサイトなどはなるべくWayback Machineを使い、過去のコンテンツを調べるようにしています。
VisualSiteMap
さて、ギャラリーサイトやDribbbleなどで参考になるサイトを見つけたら、そのサイトがどんなページ、どんな構造になっているのか調べましょう。
いちいち全てのページに遷移してスクリーンショットをとってもいいのですが、それだと漏れが出てきたり、何より死ぬほど時間がかかってしまいます。
Visual Site Mapを使えば、そんな作業を自動化することができます。
サイトのURLを入力するだけで各ページのスクリーンショットをとり、下記のようなサイトマップを作ってくれます。
使い方はとても簡単です。
まずログインしてダッシュボードから「Create Sitemap」をクリックしましょう。
すると作成するサイトマップを設定する画面が表示されます。
大きなサイトだと全てのページをクロールしてスクリーンショットをとるのにかなり時間がかかってしまうので
Max Pages: 最大何ページクロールするか
Max Depth:最大何階層クロールするか
で、クロールする範囲を指定することができます。
他にも「Advanced Settings」から特定のディレクトリ配下や、キーワードを含んだURLのページをクロールしないように設定することもできます。
設定が終わるとクロールが始まり、しばらく時間がたち完了するとダッシュボードのステータスが変更になります。
するとVisualSiteMap上で作成したサイトマップを見たり、PDFでダウンロードすることができます。
Flawless Feedback
Flawless FeedbackはMacと接続しているiPhoneで操作しているアプリやWebサイトの画面を、画像やgifで保存しコメントを入れられるツールです。
自分で作ったアプリやWebサイトを実際にスマホで操作し、改善点などを洗う時に使うのはもちろん便利です。
ただFlawless Feedbackはプロトタイピングツールなどとは違い、接続しているiPhoneの画面をミラーリングするため、自分のiPhoneで表示できるものであれば何でもこうしてコメントを入れることができます。
なので競合や参考にしているアプリをiPhoneで触りながら、ここ真似したいなとか、自分のアプリに盛り込む時はここをもう少し変えようかなとか、色々メモを入れながら分析しておくとデザインや機能を考える上でとても役立ちます。
公式サイトからMac用のアプリをダウンロードし会員登録をしたら、自分のMacとiPhoneを繋げば勝手にミラーリングされます。
あとはiPhoneを操作しつつ、気になる部分があればcommand + Sでスクリーンショットを取ります。
スクリーンショットを保存したプロジェクトに移動して、気になる部分をクリックすれば、コメントを入れることができます。
また、プロジェクトに他のユーザーを招待し、チームでフィードバックを共有することも可能です。
Canva
Photoshopやillustratorなど、通常Webやアプリのデザインに使われるツールは、操作が複雑で非デザイナーが使うのは少々難易度が高いです。
それに比べてCanvaはパワーポイントように非常に簡単に、直感的な操作でバナーなどのデザインを作ることができます。
操作の簡単さは触っていただければ分かると思うのですが、Canvaが何より便利なのは非常に多くの種類のテンプレートが用意されていることです。
ここから気に入ったものを選んで配色や文言などを少し変えれば、デザインの知識がなくてもそれなりに綺麗なものを作ることができます。
基本的にほぼ全ての機能が無料で使えますが、一部のテンプレートは都度お金を払ったり、有料版に登録しなければ使えないようになっています。
とはいえ無料で使えるテンプレートだけでも8000種類ほどとかなりの数がありますし（有料のものを含めると30万種類ほどあるようです）、有料のものも大体一つ1ドル程度です。
月額12.95ドルの有料プランに加入すると、これらの有料テンプレート全てを使うことができ、かつデータも無制限に保存することができます。
guiflow
Webサービスやアプリを作る際に、パワポなどを使って画面遷移図を作る方も多いかと思います。
ただ、開発が進み画面や機能を変更していくのに合わせて更新することを忘れると、デザインと全く違ったものになって混乱を産んだり、いつの段階のデザインと対応しているものなのか分からなくなることがよくあります。
guiflowはマークダウンのような書式で画面遷移図を書くことのできるツールです。
パワポなどを使って遷移図を作るとバージョン管理が面倒ですが、guiflowの場合はテキストで遷移図を作れるのでGitなどを使って簡単にバージョン管理することができます。
また画像ではなくマークダウンのようなある程度規則性を持った文章で管理することで、プログラムから中の情報を取り出し利用することもできます。
イメージとしてはクローラーのようなものが近いかもしれません。
Webサイトの情報はHTMLという規則性を持った文章で書かれているため必要な情報をクローラーが取り出すことができますが、これがスクリーンショットのような1枚の画像だったら、中の情報を認識し取り出す難易度がぐっと上がります。
Webflow
Webflowはレスポンシブデザインに対応したWebサイトを簡単に作れるツールです。
登録して実際の画面をみてみると一見ただのデザインツールに見えます。
しかし、Webflowがすごいのは、こうして作ったデザインをWebサイトにするためのコードに自動で変換してくれることです。
右上のメニューの「Export Code」を選択すると、変換されたHTML/CSS、Javascriptを出力してくれます。
さらにさらに、右上の「Publish」を押すと、webflowのサブドメインや自分で指定したドメインにサイトを公開してくれる、ホスティングサービスのような機能も持っています。
（この記事は非デザイナー向けのデザインに便利なツールを紹介する趣旨でしたが、Webflowはむしろ逆でコーディングやインフラの知識を持たないデザイナーが一人でもWebサイトを作れるツールですね...)
無料で使うことができますが、指定のドメインで公開できなかったり、訪問者の上限が月500人までなどの制限があるので、きちんとしたサイトを作るなら月12~36$の有料プランを使った方がいいでしょう。
uizard
デザインを考える際、最初は手書きで簡単なワイヤーフレームを書く人も多いと思います。
uizardは、そんな手書きのワイヤーフレームを自動でデザインに起こしSketchファイルや、HTML/CSS、Reactなどのコードとして出力してくれるツールです。
現在クローズドβ版らしく、サイトから登録するだけでは使えず、運営側からの招待を待たなければいけないようです。
僕も数週間前に登録したのですがまだ招待が送られてきておらず、実際にどの程度のクオリティのデザインを作れるのかわかりませんが、生成したデザインはダッシュボードから手動で修正できるようです。
生成したデザインをそのまま使うのではなく、あくまで修正する前提で考え、工程の一部を自動化するぐらいのつもりで使うのがいいと思います。
Shots
Shotsは様々なアプリのスクリーンショットが掲載されているサイトです。
これだけなら普通のギャラリーサイトみたいなものですが、Shotsのすごいところはこれらのスクリーンショットに含まれているWebサイトやアプリのパーツを、HTMLやCSSなどのコードとして出力してくれるところです。
ただし、これらの機能を使えるのは有料版のみで、パーツによっては認識できず出力がうまくいかないこともあるようです。
CSS Peeper
CSS Peeperは閲覧しているページ内のオブジェクトに当たっているCSSを簡単に見ることができるChrome拡張機能です。
一番左側のタブではCSSの閲覧を、真ん中んのタブではそのサイト上で使われている色の一覧を表示してくれます。
一番右側のタブでは、使われている写真の一覧を表示し、ダウンロードすることができます。
似たようなことはデベロッパーツールでもできますが、デベロッパーツールは多機能な分ごちゃごちゃしています。
デザインを考える時にオブジェクトのサイズやマージン、色などを調べるぐらいなCSS Peeperの方が見やすく便利です。
Linear
Linearは下記の画像のように、Macの画面上にオブジェクトの大きさを測る定規を表示してくれます。
ブラウザではなく画面上で表示してくれるため、WebサイトだけでなくPCにインストールされてるソフトや画像内のオブジェクトの幅、間隔も測ることができます。
もちろんスクリーンショットをとって、その画像をデザインツールなどで開けば似たことはできますが、ちょっと面倒だったり、そもそもPCにデザインツールが入ってないこともあります。
Linearはショートカット一発で表示/非表示などを切り替えることができるため、手間が少なく使いやすいです。
WhatTheFont
街中で見かけた広告や雑誌などに使われてるフォントを、自分のサイトでも使いたいと思うことがあります。
他のWebサイトで使われているものならCSSを見れば使われてるフォントを判別できますが、アナログ広告や雑誌のものは詳しい人でなければフォントの種類を判別することはできません。
WhatTheFontはそんな時に便利なツールです。
フォントを判別したい文字の画像をアップロードするだけで、フォント名を特定することができます。
読み取らせる文字は、斜めだったり、湾曲していたり、ある程度配置が特殊なものでも可能です。
Palettable
WebサイトやアプリのUIなどは非デザイナーでもIT系の職種の方であれば、日々ある程度気にして使っているのではないでしょうか。
なのでどんなUIが使いやすいとか、違和感がないかというのはなんとなく想像つくと思います。
しかし、配色はあまり気にしていないためいざ考えようとしてもさっぱりわからないという方も多いのではないでしょうか。（少なくとも僕はそうです）
Palettableは画面に表示される色を直感的に選んでいくと、AIが最適な配色を提案してくれるツールです。
画面に表示される色をみて、「like」「dislike」を選んでいくと
こうしていい感じのカラーパレットを生成してくれます。
クリックだけで済むので本当に楽です。
このカラーパレットはそのまま使うのではなく、前述の「Muzli Search」などに入れて、似た配色のデザインを眺めてみるとWebサイトやアプリなどに適用した際にどんな感じになるかよりイメージがはっきりしてくると思います。
Color Palette Generator
前述の「Palettable」は全く配色のアイディアがない時に使うツールですが、ざっくりと自分の頭の中にはあるんだけどな、という状況では僕は別のやり方をとることが多いです。
まずそのイメージをいきなり配色に落とし込もうとすると、時間がかかってしまったり、その配色で実際にサイトを作った時に「なんか最初考えてたのと違うな...」となってしまうので、Googleの画像検索やPinterestなどでイメージに近い写真を数枚ほど選びます。
次に写真から色を抽出してくれるColor Palette Generatorを使って、カラーパレットを生成します。
そうやっていくつか生成したカラーパレットを比較してどれがいいか考えたり、先ほどと同様に「Muzli Search」などに入れて同じような配色のサイトを見ることで、Webサイトに適用した時のイメージなどを膨らましてから決めることが多いです。
Morguefile
Webサイトやバナーに使える写真を検索できる素材サイトはいくつかありますが、サイトAで探して、見つからなかったらBで探して...という風にあちこちのサイトで検索して回るのはかなりめんどくさいです。
MorgudefileはiStockやAdobe Stock、Shutter Stockなどの有名どころの素材サイトを横断して素材を検索することができます。
またMorgudefile自体にもユーザーが写真を投稿できるようになっており、そこも検索範囲に含めることができます。
もちろんMorgudefileの検索範囲に含まれてない素材サイトもありますが、かなり大きな範囲をカバーしていると思ってるので、僕は基本Morgudefileで探してぴったりの画像が見つからなかったら諦めることが多いです。
Subtle Patterns
Webサイトを作っていると、サイトやバナーの背景に写真ではなく繰り返しの模様、背景パターンを使いたくなることがあります。
これは自分でオリジナルのものを作ろうとすると、非デザイナーにとってはかなり難しく、ハードルが高いです。
Subtle Patternsはそんな背景パターンが500以上も無料で利用できるサイトです。
背景パターンはキーワードで検索することもできるのですが、結構適切なワードで検索するのが難しいので、ページか下部にあるタグの部分からある程度絞り込むといいかと思います。
終わりに
ここまで読んでいただきありがとうございました。
デザインだけでなくマークアップの部分などに関連したツールなども混じってしまいましたが、いかがでしたでしょうか。
エンジニアにしろPMにしろ、少しはデザインの知識があるのがベストだと思いますが、中々今の領域に加えてデザインを勉強するのは大変だと思います。
しかし、領域がすぐ近くである以上、エンジニアとデザイナー、PMとデザイナー、ちょうど真ん中に落ちてしまうタスクが出てきたり、リソースの問題などでやる必要が出てくることは誰にでもあるでしょう。
そんな時に本職のデザイナーと同じクオリティの物を出すのは不可能ですが、あまりにもむちゃくちゃなものを作らないよう、今回ご紹介したツールなどを使って頂くと、最低限のクオリティを担保できるかなと思います。
もしこの記事が多少なりとも内容がお役に立てば左下のハートマークをポチッとしていただいたり、SNSでシェアしてもらえると嬉しいです。
シェアして頂いた内容は拝見し、下記のアカウントからファボやリツイートさせて頂くかもしれません。
また別のnoteでは、プログラミングの学習方法などについても書いているので、よければぜひこちらも読んでみてください。
気軽にクリエイターの支援と、記事のオススメができます！
