webデザインを制作する上でよく利用するサービスまとめ

私自身はwebエンジニアですが、業務範囲がサーバーサイドからフロントまで幅広いため、UI/UXデザインなどももちろん仕事の範囲。
そんな私が仕事をしていく中でよく利用するサービスなどを紹介していきます。

※基本的に有名なサービスばかりです。新しいものを探している人より、まずどんなものがいいのかを探しているビギナー向け。

テキストエディタ

Atom

言わずもがなお世話になっております。利用プラグインは以下の通り。

  • japanese-menu
    • メニューバーとコンテキストメニュー、設定画面の日本語化
  • project-manager
    • 利用するプロジェクトフォルダの管理
  • minimap
    • ファイルのどの位置にいるのかミニマップを右サイドに表示
  • show-ideographic-space
    • 憎き全角スペースを可視化
  • pigments
    • カラーコードを入力した際、背景を自動的にその色に変更
  • sass-autocompile
    • .sass, .scss などを保存した際、自動的にコンパイルしcssを生成・上書きする

CotEditor

正規表現で一気に置換する時によく使います。ただしMac専用です。

デザインやプロトタイプの作成

Adobe XD CC

以前はPhotoshopを使っていましたが、とても重い。そもそも立ち上げるのに時間がかかっていたけれど、XDめちゃめちゃ軽いです!しかもUIも直感的。Adobeに慣れてる人はより使いやすいかもしれません。
日本語が使えるのもよかったです…(Sketchは英語で断念してしまった)

個人で使うなら無料の範囲でものす〜ごく使えます。複数人でプロトタイプを共有していくなら有料版がいいかもしれません。

画像加工には向きませんが、逆にマテリアルデザインを基調としたシンプルでスタイリッシュなデザインを作るのであればとても向いています。

カラーセット

2014 Material Design color palettes

Googleが提供するオープンソースのデザインシステムMaterial Designのカラーパレット。綺麗に整っているのでここからbasicカラーとaccentカラーを決めてデザインに組み込むことが多いです。

アイコンセット

Font Awesome

とても種類が豊富で使いやすい。無料版の範囲でもすごく使えます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

この一行入れて、あとは使いたいアイコンのタグ <i class="fas fa-***"></i> などをhtmlで置く or cssで content: f024; のように指定していく。それだけ。
自分のローカル上にフォントファイルを落としてPCにインストールすればAdobe XDでも使えるます。SVGファイルとしてDLする必要もないので楽ちん。

Icons - Material Design

先ほどのカラーセットと同様、Material Designのアイコンセット。種類はFont Awesomeには劣るものの、スマートで使いやすいアイコンが揃っています。個人的にデザインはこちらの方が好き。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

上記の一行を読み込み、htmlタグ <i class="material-icons">***</i> を入れると簡単に表示されます。

オマケ:レイアウト、UIデザインなどを作成する際参考にしているサイト

Dribbble

質の高いデザインが集まっています。このサイトを見てトレンドを確認しつつレイアウトやUIを作成することが多いです。
主流のマテリアルデザインを用いたダッシュボード、ログイン画面、アプリデザインなどが多く、webサービスを作成する際とても参考になります。

Pinterest

何か困ったらPinterest。デザインを検索したり、逆にこれがいいと思ったデザインを保存したりできます。何でもボックス。
Chrome用のプラグインもあるので、合わせて利用するとより便利。