• Home
• コーポレートブログ
• webサイト制作時にお世話になっているサービスと素材サイト

webサイトやパンフレットの制作、ノベルティグッズの企画など広報寄りの仕事が多い前田です。ファーエンドテクノロジーで運営するwebサイトの更新のうち、そこそこの割合を担当しています。自社のwebサイトを数えてみたら10ありました。

先月から広報担当を置いてサイト更新の分担を始めたので、今回は社内の情報共有を兼ねてサイトを作ったり更新するときによく参照しているサイトを紹介します。

ツール

Metallic Ratio : 黄金比・白銀比などを素早く計算

画像を切り抜いたりレイアウトを決めたりするときに、黄金比、白銀比、青銅比などの古くから美しいとされてきた比率を使うことがよくあります。Metallic Ratioはあらかじめ用意された8種類の比率の計算が素早く行えます。

Can I use : ある機能がどのブラウザのどのバージョンで使えるか

使おうとしているCSSプロパティ、HTML5タグ、JavaScript APIについて、どのブラウザのどのバージョンからサポートされているのか一覧で確認できます。

例えば、以下のスクリーンショットではCSSの text-shadow プロパティがInternet Explorer 9以下でだけ利用できないことがわかります。

ProCSSor : CSSを自分好みにきれいに整形

CSSをきれいに整形してくれるサービスです。ProCSSorの特徴は整形結果を調整するオプションが多く、自分の好みに近い結果を得やすいことができます。

整形前:

⇩

整形後:

去年サイトが売りに出されてて案外安くて思わず買いたくなったのですが、MaxCDNという会社が買ったようです。

モバイルフレンドリーテスト : サイトがモバイル端末からの閲覧でも問題ないか確認

4月21日より、Googleのモバイル版の検索結果ではモバイル対応のページの順位が引き上げられました。逆に言うとモバイル対応していないサイトの順位が下げられたので、今後はwebサイトのモバイル対応が必須になりました。

Googleが提供するモバイルフレンドリーテストでは、スマートフォンなどモバイル端末での閲覧に問題がないか、Googleの基準に準拠しているか確認できます。

アイコン素材

IcoMoon : フリーのモノクロアイコン

IcoMoon Free Packでは490種類のモノクロアイコンが利用できます。

Premium Flat Social Icon Set : ソーシャルサービスのアイコン

RSS、Twitter、Facebookなど10のサービスを表すアイコンが各2種類・計20個提供されています。$6のフルセットには計40個のアイコンが含まれます。

ICONFINDER : アイコン素材の検索

フリーや有償のアイコンを検索できます。今風のフラットな印象のアイコンが数多くヒットするのが気に入っています。

背景パターン

Subtle Patterns : ページ背景用のテクスチャ画像

ページの背景に使えるテクスチャ画像が検索できます。山陰ITレーダーの背景パターンはここで見つけたものです。

写真

flickr: The Commons : Creative Commonsライセンスの写真を検索

写真共有サイトのFlickrで検索を行う際、「License」として「Creative Commons only Commercial use allowed」を指定するとCC BY-SAライセンスの写真のみを検索できます。ページのアイキャッチ画像を探すのに使っています。

PIXTA : 国内企業によるストックフォト

国内企業が運営するサイトなので写真をアップロードする人も日本人が多く、日本国内向けのサイトで使いやすい雰囲気の素材が多くて重宝しています。