ウェブデザイン効率化のためのチュートリアル記事をまとめてみた。

こんにちは。

流行や技術の進化がとてつもなく早いウェブ業界。

様々なツールをつかいこなすことで効率化が図れると思います。

しかし私の場合、知ってはいるけど実際に作る時に反映できないってことが多々あるので、今回役立つサイト様をメモしていきます。

あくまで主観的に参考になったものや、今後取り入れていきたいものをまとめました。

サイトを作る前の準備

Webサイトを作る前に必ずやっておくべき7つの項目

Neganinさんのサイト。

初心者向けに書かれている記事で要点がまとまっていてとてもわかりやすいです。

ビジネスになってくるとお客さんとのコミュニーケーションを基に決めていくことが多いと思いますが、

そうでない場合はこちらのサイトさんを参考にさせて頂くだけで十分すぎるくらいです。

特にサイトマップ作成はちゃんとやっておきたいですね。

デザイン・コーディング

Photoshopのレイヤーまわりのキーボードショートカット（完全版/Mac）

photoshop で作業する際はショートカットキーを覚えておくと便利ですね。

一度に見てもなかなか覚えられないので、頻繁に使いそうなものを一つずつ覚えていくようにしています。

【デザイナー必見！】WebデザインのためのPhotoshopチュートリアルまとめ

デザインを作る過程でのTipsが多くまとめてある記事です。

ちょっと表現を工夫したいときに役立つと思います。

Photoshopを快適カスタマイズできるオススメ無料プラグイン6選

LIGさんが実用的なプラグインをまとめていました。

早速入れておきます。

ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し

Photoshop CCの特徴の一つ「画像アセット」について詳しく書かれている記事です。

スライスは確かに面倒な部分があるので、この機能を使ってスムーズに画像を保存したいですね。

PhotoshopとDreamweaverの新しいワークフロー　第1回：PSDファイルから効率よくデザインする2つの方法

一番やりたいことの一つです。

Photoshop と Dreamweaverの連携機能を駆使して効率化を図るための説明をわかりやすくされています。

今後のアップデートで更に関連性が増すことは間違いないので、今のうちに使っておきたい。

WEBデザイナーのはじめての「SVG」

retina、4K対応のためにもSVGはいずれ必須になると思うのでぜひとりいれたいですね。

Bootstrap 4の使い方: 制作時のベースになるテンプレートのまとめ

おなじみのcoilssさんから。

bootstrap 4 の便利なテンプレートがまとめられています。

使いこなせればスムーズにレイアウトが可能に。

2016年に流行しそうな、注目Webデザイントレンド11個を大予想

PHOTOSHOP VIPさんで今後の流行を予想しています。

インターフェースの面からもしっかりと考察されているので、今後サイトを作る際に取り入れるのもありかと思います。

まとめ

以上、参考になるサイトさん、今後チャレンジしたいことをまとめているサイトさんを集めてみました。

Adobe CCを使いこなせれば作業効率はめちゃくちゃ上がりそうですね。

いつでも使えるようにちょくちょく頭に入れておこうと思います。

デバイスの多様化で制作側がやらなくちゃいけないことが多くなり、対策方法もまた多様ですが、正しく理解してその都度使いこなせるよう勉強しなければなりませんね。