[Freebie] PSD Repo – WebやAppのPSD素材配布サイト
Webのモックアップやアイコン、ボタン、Mobile AppのUIキットなどのPSD素材配布サイト。ページ数を見たところ105ページあるので、結構な数が紹介されているようです。この手の「PSDなんちゃら」ってサイトいくつもありますが、素材探し以外にデザインのネタ調としても使えそうです。
Tag Archives: WebDesign
[Web Service] Carrd – コードを書かずにポートフォリオをビルドできるサイト
コードを書かずにWeb上だけでポートフォリオページを作る事のできるサイト。とりあえず試してみたいだけなら、LoginせずにいきなりBuildできます。まず最初に複数のテンプレートから自分が作りたいものに近いテンプレートを選んで、その後で細かくカスタマイズしていくという流れのようです。各要素は編集だけでなく移動などもでき（完全に自由というわけではなく、入れ替え程度）、編集が完了したら右上のフロッピーアイコンからパブリッシュして完了。各種SNSへのリンクアイコンも一通り用意されているので、そうしたメディアへのハブとしても使えそうです。
[Web Design] Responsive Test – レスポンシブレイアウトのテストツール
レスポンシブレイアウトの動作確認ツール。確認したいサイトのURLを放り込むだけで、様々なデバイスでの表示シミュレーションができます。指標としてはXLがPC、LGがiPadのランドスケープ、MDがiPadのポートフォリオ、SMがiPhoneのランドスケープ、XSがiPhoneのポートフォリオという感じです。Bootstrapとかの表示切り分けclassと基本的に同じ命名ルールなので分かりやすいです。サクっと複数デバイスでの確認をしたい時に便利ですね。
[Logo] Instant Logo Search – ロゴの検索＆ダウンロードサイト
様々な企業、またはブランドのロゴを探すことのできるサイト。ロゴは全てSVGでダウンロードできる点がとってもナイスです。またロゴも1種類だけでなく、複数種用意されているのもいい感じです（例えばAppleなら、AppStoreやApple Payなどもあります）。大きい企業ガラみのサイト制作する時ってたまに、「もう着手したいんだけど素材がねぇ！」とかなるので、そんな時の探しものに使えそうです。
[CSS] Balloon.css – CSSだけで動作するバルーンヘルプ
Javascriptを使わず、CSSだけで動作するバルーンヘルプ。コードはGithubで公開されていて、CSSだけなのでサクっと導入する事ができます。なのにわりと多機能で、バルーンを出す方向や、中に入るコンテンツの量次第で自動で大きくなるなど、使い勝手も良さそうです。
[Prototyping] sketchsheets – 手書きのプロトタイピングに使える印刷用PDF
手書きのプロトタイピングをする際に便利な、印刷用PDF。用意されているテンプレートは、iPhoneやiPadなどのタッチデバイスの他に、ブラウザウィンドウなどもあるので、モバイルAppだけでなくWebデザインの現場でも使えます。またiPadのものはSlide Over（2画面表示のアレです）表示時の画面分割されたものも用意されていて、気が利いてるなーと思いました。
[Bootstrap] TWBSColor – Bootstrapのnavbarをカスタムできるジェネレーター
Bootstrapのnabber専用のカスタマイザー。背景色や文字色などを個別にカラーピッカーを使って色指定する事ができます。指定した内容はSCSS, SASS, LESS, CSSの形式でリアルタイムに生成されるので、あとはその中から好きなものをコピペして使うだけ。また指定した内容はパーマリンクが常に生成されるので、後になって再修正したい時なんかに便利です。
[Mockup] MocKit 2.0 – 画像やWebサイトをiPhoneのモックアップにハメ込み合成できるサイト
任意の画像やWebサイトを、iPhoneのディスプレイ部分に表示させることのできるサイト。UIデザイン作例の確認や、Webのスマホ版レイアウトの動作確認に使えそうです。iPhoneも4色ラインナップされており、またHTMLとCSSでデザインされているのでソースコード一式をダウンロードする事もできます。ちょっとした確認作業や顧客へのデザイン確認などに使えそうです。