おすすめラインナップ

Web制作のノウハウは至るところにあって情報の取捨選択に困ってしまうくらい。業界のトレンドからデザインやコーディングのTipsまで、私が参考にしているサイトをご紹介します。

Web全般の情報を得られるサイト

知らないと話が通じないくらい有名なサイトです。

Web担当者Forum
Web業界のトレンド、基礎知識、セミナー情報までWebに携わる人はだいたい見ているサイト。

学習サイト

実践するにあたり、具体的なノウハウが学べるサイト。

ドットインストール
コーディングの基礎を動画で実演してくれるサイトです。HTMLからRubyやNode.jsまでWebプログラミングの殆どを学べます。

ギャラリーサイト

デザインするときに参考にしているサイト

I/O 3000
オシャレ系のデザインが多めのギャラリーサイト
イケサイ
定番のデザインが多めのギャラリーサイト

写真・イラスト

写真やイラストはコンテンツを無意識にイメージしてもらえるので取り入れたいところ。自分のものを利用するのが理想的ですが、不可能なときは「素材サイト」を使うと便利

写真AC(無料)
無料で風景、人物、ビジネス、料理など幅広い写真がダウンロードできるサイト。大・中・小のサイズを選べるのもが良いです。
PAKUTASO(無料)
写真がとても綺麗。会員登録をしなくても写真をダウンロードできるのが便利。「ノマド」「フリーランス」など、ビジネス系の写真を探すときに便利です。人物の入った写真も豊富です。
PIXTA(有料)
超有名な有料写真素材サイト。「実験」「看護」など専門的なものでも写真が見つかります。さすが有料です。無料サイトで粘って探すよりも、こちらで買う方が早いことも多いです。ほぼ思い通りの写真が見つかります。
いらすとや(無料)
ほんわかとしたイラストが豊富。ジャンルも「季節の行事」「学校」「自然」など様々です。
イラストAC(無料)
「photoAC」の姉妹サイトです。たくさんのイラストレーターさんの作品があるので絵のタッチも様々。AIデータをダウンロードできることもあるのがありがたいです。

ジェネレーター

ジェネレーターとは、与えられた条件などに基づいてプログラムコードを自動的に生成してくれるプログラム。複雑なCSSなどを感覚的に作れるのがグッド

Placehold.jp
超簡単にダミー画像をつくれるサイトです。文字を入力したりやサイズを変更することもすべてウェブ上でできる。参照できるのも素晴らしい。
Logaster
Logaster
オンライン上でロゴを作成できるサービス。無料でロゴをつくれる(高品質なデータの保存は有料)。ロゴ作りのヒントにはなると思う。ロゴだけじゃなく名刺や封筒、ファビコンも作れます。
日本語 Lorem ipsum
夏目漱石や宮沢賢治の作品を書き起こしてくれるサイト。具体的な文章は思い浮かんでいないけれど、文章を入れたらどんな感じの見栄えになるのかを事前に把握しておきたいときに、サンプルとして差し込むのに便利。「テキストテキスト…」や「◯◯◯◯◯◯…」の繰り返しじゃ味気ないからね。
Type Scale – A Visual Calculator
段落の文字サイズを基準に見出しの文字の大きさを計算してくれるサイト。僕はMajor SecondかMinor Secondをよく使いますね。
Ultimate CSS Gradient Generator
CSS3の「linear-gradient」を使ってグラデーションを実装するコードを出力してくれるサイト。Illustratorやフォトショップのグラデーションツールを使う要領でCSSを作れます。グラデのときは必ず使うジェネレーターだね。
Box Shadow CSS Generator
CSS3の「box-shadow」を使ってドロップシャドウを実装するコードを出力してくれるサイト。つまみを調整しながらオブジェクトに影をつけていくだけでございます。影は内側(inset)にも付けられますよ。
CSS3 Text Shadow Generator
CSS3の「text-shadow」を使って文字に影を付けるコードを出力してくれるサイト。つまみを調整しながらオブジェクトに影をつけていくだけでございます。背景画像の上に文字を書くときに影をつけると読みすくなります。
CSS ARROW PLEASE
CSSを駆使して「吹き出し」を表現するコードを出力してくれるサイト。cssのbefore、afterを極めると表現の幅が広がります。けっこうめんどうなんだよね。

SEO対策ツール

ああああああああああああああああああああああああああああ

グーグルサジェスト キーワード一括DLツール
グーグルのサジェスト機能を使用して、検索ワード候補を一覧にしてくれるツールです。

拡張機能

Google Chromeの拡張機能というのは、パソコン上のインターネットのブラウザであるGoogle Chromeの機能を拡張するものです(そのまんまやん)。 例えば、Twitterのタイムラインを表示する拡張機能を追加すれば、わざわざサイトに行かなくてもブラウザ上に表示されるTwitterボタンをクリックするだけでタイムラインがニュルッと表示されます。

ColorZilla
サイト上のカラーコードを取得できます。画像のカラーコードもわかりますよ。
MeasureIt
指定した範囲の縦・横の長さ(ピクセル)を教えてくれます。
WhatFont
文字のフォントスタイルがわかります。
Awesome Screenshot
ブラウザのスクリーンショットを撮ってくれる拡張機能。ページ全体はもちろん、範囲指定も可能です(上図参照)。撮ったスクリーンショットは、画像ファイルに保存、クリップボードにコピー、印刷が可能です。メチャ便利。

アプリ

アプリを活用するとスマホでもクリエイティブな活動ができ時間を有効活用できます。

Google Keep
メモ管理アプリ。パソコンとスマホの同期を取ってくれる。ライティングに便利
Google フォト
写真管理アプリ。スマホで撮影した画像をパソコンでも見れるようになります。スマホで撮影してパソコンで編集するときにデータのやりとりが発生しなくて素敵。
CotEditor
Mac用のエディタ。コーディングだけじゃなくライティングにも利用しています。

Back to Top