ブラウザの拡張機能を入れるだけで、あらゆる場面で本当に便利になります。今回は、chromeの拡張機能でオススメの10選を紹介します。

目次

• Wappalyzer
• One Tab
• SearchPreview
• Awesome ScreenShot
• Save to Pocket
• Clear Cache
• PerfectPixel
• EditThisCookie
• ColorPick Eyedropper
• Fontface Ninja
• 最後に

おすすめ一覧

Wappalyzer

サイトで使用しているCMS・フレームワーク・webサービス…など、知りたいときに便利です。

提供元:Wappalyzer

ダウンロードページ

One Tab

気づいたらタブがいっぱいになってる人には本当におすすめ！いっぱいになったら１クリックでまとめてくれます。さらに作成したリストごとに名前を付け個別URLを発行することができ、他のひととの共有もスムーズです。また、消費メモリを最大95％削減できるそうです。

提供元:One Tab

ダウンロードページ

SearchPreview

検索画面に、サイトのキャプチャが表示されるようになります。クリックする前にどんなサイトかわかるのが便利です。

提供元:SearchPreview

ダウンロードページ

Awesome ScreenShot

部分的、全体など状況に合わせてサイトのスクリーンショットが撮れます。注釈入れなど、簡易的な編集もできるのもポイントです。

提供元:Awesome ScreenShot

ダウンロードページ

Save to Pocket

Pocketユーザーにおすすめ！あとで読み返したい記事を登録するのに重宝しています。

提供元:Save to Pocket

ダウンロードページ

Clear Cache

１クリックでキャッシュクリアができます。

提供元:Benjamin Bojko

ダウンロードページ

PerfectPixel

コーディングしたものにデザインカンプを重ねて、ずれていないかチェックできます。チェックしながらCSSも修正できて便利です。

提供元:PerfectPixel

ダウンロードページ

EditThisCookie

保存されているクッキーの編集・削除などができます。

提供元:EditThisCookie

ダウンロードページ

ColorPick Eyedropper

サイトで使用されているカラーを知りたいときに、簡単に色が拾えるのでおすすめです。

提供元:ColorPick Eyedropper

ダウンロードページ

Fontface Ninja

サイトで使用されているフォントの種類やサイズなどの詳細を表示できます。

提供元:Fontface Ninja

ダウンロードページ

最後に

便利なものが多いですが、あれもこれもと全部入れると重くなるので、必要なものを厳選して使うのがおすすめです。

ページ名やカテゴリー名に使えそうな英単語

パーツ名やclass名に組み合わせて、使えそうな英単語

レイアウト関連など

テキスト系

パーツ名など

形の名称

最後に

いかがでしたか？英語など調べることも多々ありあますが、少しでも参考になりましたら幸いです(^^)

とりあえずダミーで画像を入れたい！ってこと、よくありますよね？
そんなときに使える、ダミー画像を生成できるサービスを紹介します♪

目次

• シンプルなダミー画像
• ５つのジャンルから選べる
• ランダムな写真
• 子猫のダミー画像
• 顔写真のダミー画像

シンプルなダミー画像

文字や背景のカラー、サイズなど自由に変更できます。

サンプル

		/* １枚目 */
		<img src="https://placehold.jp/200x200.png" alt="">

		/* ２枚目 */
		<img src="https://placehold.jp/3d4070/ffffff/200x200.jpg" alt="">

		/* ３枚目 */
		<img src="https://placehold.jp/5dab9f/ffffff/200x200.png?text=Images" alt="">

		

Placehold.jp

５つのジャンルから選べる

５つのジャンル（Animals、Architecture、Nature、People、TECH）から選べます。
グレースケール、セピア調にもできます。

サンプル

		/* １枚目 */
		<img src="https://placeimg.com/300/200/any" alt="">

		/* ２枚目 */
		<img src="https://placeimg.com/300/200/arch/grayscale" alt="">

		/* ３枚目 */
		<img src="https://placeimg.com/300/200/tech/sepia" alt="">
		

PlaceIMG

ランダムな写真

写真はランダム（好きな画像に固定もできる）で表示され、グレースケール・セピア調・ぼかすこともできます。

サンプル

		/* １枚目 */
		<img src="https://picsum.photos/300/200" alt="">

		/* ２枚目 */
		<img src="https://picsum.photos/id/237/300/200" alt="">

		/* ３枚目 */
		<img src="https://picsum.photos/300/200/?blur=3" alt="">
		

Lorem Picsum

子猫のダミー画像

子猫の画像オンリーのサイトです。

サンプル

		/* １枚目 */
		<img src="http://placekitten.com/300/200" alt="">

		/* ２枚目 */
		<img src="http://placekitten.com/g/300/200" alt="">
		

{placekitten}

顔写真のダミー画像

顔写真をたくさん使いたいときにオススメです。
XDとSketch用のプラグインやAPIも用意されています。

UI Faces

まとめ

いかがでしたか？
わざわざダミー画像を探したり 作るのに手間をかけるより、お手軽にできた方がいいと思いますので、うまくご活用ください♪

画像書き出しの段階で、コーディングを意識したスライスができていますか？

というのも。早い段階でコーディング部分までイメージしておかないと、後々 余分なCSSを書くことになったり、スライスをやり直すことになりかねません。
今回は、コーディングしやすいスライスのポイントをまとめてみます。
※フォトショップをベースに書いています。

スライス作業に入る前に

コーディングをするのは誰？

もし、他の方がコーディングをする場合は、自分とは違うコードの書き方かもしれません。スライスする前に要望など確認しましょう。

スライスツールかアセット書き出しか

アセット書き出しはとても便利ですよね！デザインが確定していて、アセット書き出しを想定して作られたデータならオススメです。

でも、例えば余白込みでスライスしたいとか、のちに写真差し替えがある場合などは、アセット書き出しを使わない方が効率が良い場合もあります。

それぞれのメリット・デメリットを確認しておくのがベストです。

画像書き出しするときのポイント！

同じ種類の画像は、「横幅」や「高さ」を揃える

例えば、ナビに使っているアイコンなど　サイズが統一されているものは、高さだけ もしくは横幅だけ統一する。もしくは高さも横幅も両方揃えておくと、CSSで一括指定ができたり、画像が扱いやすくなります。

ファイル名はわかりやすく、規則性を持ってつける

ファイル名をみて、「メインビジュアルに使われている写真」、「メニューに使われいてる矢印」ということが、予測できるファイル名がおすすめです。
ファイル名のつけ方にルールを作っておくと、ファイル名をつける時に悩みませんし、画像が探しやすくなります。

例）nav_icn_home.png（画像が使われる場所+画像の種類+補足+拡張子）
ナビのホームのアイコン画像かな？と予想がつきますよね。このように、ルール化しておくのがオススメです。

ファイルの種類（jpg、png、svgなど）は正しく選ぶ

透過が必要な場合はpngを使う。写真はjpgにするなど、必要に応じて適したファイル形式を選びましょう。データ量の節約にもなります。

コーディングで実装する箇所を、事前に考えておく。

「ここの文字は画像だけど、この文字はデバイステキストで実装する。」という具合に、
矢印やハンバーガーボタン・角丸・シャドウ・グラデーションなども、CSSで実装するのか否か、事前確認しておきましょう。

リピートできるものは、リピートできる最小サイズで書きだす

大きな画像でリピートすると重くなるので、リピートできる最小サイズでスライスしましょう。

スライスしたデータ（PSD・AIなど）は残しておく

後から、修正や差し替えがあったり、再度書き出しが必要になることもあります。もとのスライスデータを流用できる場合もあるので、データは残しておくのがベストです。

レスポンシブやスマホ対応するときのポイント！

画像サイズは偶数にする

奇数になっていると、ブラウザによって画像の見え方が変わるため、例えば１px見切れたり、画像が滲む原因になります。割り切れるサイズ（偶数）にしておくのがオススメです。

画像の書き出しサイズを確認しておく

レティーナ対応で２倍、３倍サイズなどで書き出すのか？事前に確認しておきましょう。

最後に

いかかでしたか？
今回紹介したことが、スムーズにコーディングするためのヒントになれば幸いです。それでは、よきコーディングライフを♪

ショートカットキー忘れた！あのプロパティ名が思い出せない・・・などなど
ふとした時にチートシートを見て救われたり。
こんなのがあるんだ！っていう発見もあるかも。

そんな時、日本語版の方が見やすいかな？と思ったので、
日本語版のものを集めてみました！(&英語でもわかりやすいもの）

PCに保存したり、１枚印刷して手元に置いておくと便利です。

目次

• Illustratorのショートカットキーリスト
• Photoshopのショートカットキーリスト
• 日本語版 WordPress チートシート
• WordPress Template Hierarchy
• HTML5タグ★チートシート
• CSS Flexbox チートシート
• CSS Cheat Sheet

日本語版チートシートまとめ

Illustratorのショートカットキーリスト

デザイナーが良く使うショートカットをピックアップしています！
日本語で非常に見やすいので、デスクなどに置いておきたい１枚ですね。

配布元:Adobe

Photoshopのショートカットキーリスト

先ほど紹介したシートの、フォトショップ版です！
こちらも合わせて印刷しておくと便利かと思います。

配布元:Adobe

有名なブログ「Webクリエイターボックス」さんが配布してくださっている、WordPressのチートシートです。
例文付きで、見やすくまとまっていてオススメです。

配布元:Webクリエイターボックス

WordPress Template Hierarchy

WordPressのテンプレート構成を図にまとめています。

配布元:WORDPRESS.ORG

HTML5タグ★チートシート

HTML5のタグと概要の説明が載っています。
チートシートがあると検索する手間が省けますね。

配布元:＠IT

まとめ

いかがでしたか？
チートシートはみやすくまとめられているので、ぜひご活用ください。
また素敵なチートシートを見つけましたら、紹介しますね♪

Webデザインをする時に、知ってて便利なオンラインツールを紹介します！

目次

• 1.METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]
• 2.Gridpx：グリッドデザイン計算ツール | Webデザイン便利ツール
• 3.Placehold.jp｜ダミー画像生成 モック用画像作成
• 4.Wordmark.it – Helps you choose fonts
• 5.Gridulator: Make pixel grids, lickety-split
• まとめ

オンラインツールのご紹介

1.METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]

http://voidism.net/metallicratio/

黄金比や白銀比など、美しい比率を使いたい時にオススメ。
使いたいサイズを入力すると、それに合わせて自動計算してくれるのでお手軽です。

2.Gridpx：グリッドデザイン計算ツール | Webデザイン便利ツール

http://www.kenjisugimoto.com/gridpx/

グリッド分割がカンタンに計算できます。
コンテンツ幅・カラム数・マージンを記入すればOK。

3.Placehold.jp｜ダミー画像生成 モック用画像作成

https://placehold.jp/

お手軽にダミー画像を作れる有名サイト。
ダミー画像のURLも発行できるため、htmlに記載するだけでダミー画像を使用することも可能。
jpg、pngに対応。

4.Wordmark.it – Helps you choose fonts

https://wordmark.it/

好きな文字を入力すると、PCに入っているフォントを使って一覧にしてくれます。
フォント探しで迷ってしまった時に使ってみてください。
気になったフォントだけを抜粋して表示することもできます！

5.Gridulator: Make pixel grids, lickety-split

http://gridulator.com/

グリッドデザインをする時に、カンタンにグリッドを作成できるツールです。
カラム数や、コンテンツ幅など自由に設定できます。
PNG書き出しも可能。

まとめ

有名なサイトが多いですが、どれも使いやすいものばかりです。
一度使ってみてはいかがでしょうか？

がっつりターミナルを使う方は、
ホームポジションをなるべく崩さないようにコマンドを打てるようになると、
作業効率が上がるのを実感できると思います。

他のアプリなどで使えるショートカットも多いので、
ぜひ使ってみてください。

ターミナルのショートカット

移動

削除

その他

まとめ

今回は使いやすそうなショートカットを厳選して紹介しましたが、いかがでしたか？
ショートカットを覚えて 黒い画面とお友達になれますように♪
少しづつ取り組んでいきましょー(^^)

Appleの公式サイト内にMacのショートカット一覧が記載されていますが、
今回紹介するのは、その中でも使って欲しいものに厳選しています。
他にどんなショートカットがあるかの確認などに、後々見てみると良いと思います。

Macのショートカットまとめ

基本・編集など

ウィンドウ・アプリケーション

Finder

その他

まとめ

どうでしたか？
ショートカットは効率アップであり、とっても楽で便利なものなので、良いショートカットが見つかりましたら幸いです♪

ショートカット系は、実際に使って試してみるのがオススメです。
特に使って欲しいものは★をつけてます！

※筆者はMac環境のため、Winについては未確認のものが多数ありますので、あしからず…

Atomで使えるショートカット一覧

選択・マルチカーソル

移動

編集

編集（行）

パネル・ファイル関連

ツリービュー

ブックマーク

その他

まとめ

どうでしたか？
ショートカット覚えるだけで効率がぐんと上がるので、よく使うものから覚えていきましょー(^^)d

ぜひご自身にあったパッケージを見つけて使ってみてください〜。

Atomのおすすめパッケージ20選！

日本語化

入力関連

表示関連

その他

Git

まとめ

どうでしたか？
パッケージを入れすぎると重くなると思いますので、自分にあうものをカスタマイズして、効率アップしていきましょー♪