ウェブ制作 モバイルアプリやウェブサイトのスクリーンショットを各種デバイスのモニタに合成してくれるサイト「Smartmockups」
すでに知ってる人が多いだろうけど、一応メモがてら記事にしときます。モバイルアプリやウェブサイトのスクリーンショットを各種デバイスのモニタに合成してくれるサイト「Smartmockups」が便利です。Smartmockupsちなみに用意されて...
web design
ウェブ制作 
Adobe CC Kindleストアで「春は『デザイン』をきちんと学習」キャンペーン開催中、デザイン関連書籍が999円
AmazonのKindleストアで、デザインの基礎やデザイン制作アプリの参考書などが999円で購入できる「春は『デザイン』をきちんと学習」キャンペーンが開催中ですね。期間は2016年3月10日まで。下に個人的にお勧めな書籍をピックアップして...
その他 モバイルやウェブアプリなどのUIを集めたギャラリーサイト「Collect UI」
主にモバイルアプリや、ウェブアプリ、ウェブサービスなんかで使えそうなUIをたくさん集めているギャラリーサイト「Collect UI」。わりと最近流行なカード型デザインなどが多い気がします。Collect UI - Daily inspira...
ウェブ制作 モバイルアプリやウェブサイトのUIデザインギャラリー「UI Garage」
モバイルアプリやウェブサイトのUIデザインを集めたサイト「UI Garage」。有名どころからマイナーなものまでたくさん集まっているので眺めているだけでも勉強になります。UI Garage - Specific mobile and web...
WordPress WordPressやBootstrapで使えるテーマのまとめサイト「Theme cards」
WordPressやBootstrapなどウェブ制作の現場で役立ちそうなテンプレートファイルやテーマファイルを紹介しているサイト「Theme cards」を紹介。オシャレなデザインのものが多く、素材探しにもネタ探しにも勉強にも役立ちそうです...
その他 Facebookが公開しているデバイスモックアップ画像が便利
Facebookが無料で公開しているメジャーなデバイスのモックアップ画像がクオリティ高いしスマートフォンやタブレットなどの主な機種を網羅しているので何かと便利ですね。Devices — Facebook Design Resources再配...
ウェブ制作 レスポンシブデザインのレイアウトを1画面で確認できるサイト「Responsinator」
レスポンシブデザインのウェブサイトを作らなきゃならないことって増えてますよね。だけど実機やシミュレータでいちいち確認するのってわずらわしいじゃないですか。そういう時にこの「Responsinator」が便利なんじゃないかと。使い方はサイト左...
ウェブ制作 CodePenが用意するスニペットのまとめ「Design Patterns on CodePen」
ウェブ制作に関わる人ならみんなアカウントを持っているんじゃないかと思うCodePenですが、そのCodePen自ら便利なコードスニペットのまとめページ「Design Patterns on CodePen」を公開してますね。Design P...
ウェブ制作 Bootstrap用のMaterial Designテンプレートが揃う「Material Design for Bootstrap」
個人的には最近ちょこちょこ増えている印象のMaterial Design案件ですが、制作時にずいぶん参考になる、というか、場合によってはそのまま使っても行けるんじゃねって思うBootstrap用のMaterial Designテンプレートが...
ウェブ制作 ウェブ系企業ブランドのSVGロゴデータが手に入る「Simple Icons」
一般的なウェブ系企業ブランドのロゴがSVG形式で一覧表示され、ダウンロードもできちゃう便利なサイト「Simple Icons」。眺めているだけでも勉強になるし、必要なものはダウンロードまでできるなんて素晴らしい。GitHub（danleec...
ウェブ制作 そのフォントが使われているサイトをリストアップしてくれるサービス「FontReach」
フォント名を入力すると、そのフォントがどんなサイトで使われているかを表示してくれるサイト「FontReach」。使われているフォントのランキングもあるのでちょっと楽しい。FontReachデザインも綺麗だし、インターフェイスもシンプルで良く...
iPhone・iPad iOSやMacのアプリなどのデザイン事例や素材を集めたサイト「iOSUp」
マテリアルデザインの事例集として「MaterialUp」が有名ですが、その兄弟サイトとしてiOSやMacのアプリやアイコンなどのデザイン事例や素材を集めたサイト、「iOSUp」がオープンしたとのアナウンスが届きました。ざっと眺めてみるとAp...
Adobe CC 【Photoshop】カンバス内にHTMLを描画できるプラグイン「HTML Block」【Web Design】
Photoshopのカンバス内にHTMLを描画させる領域を作ることができるプラグイン「HTML Block」。描画させるにはプラグインのパネル内に直接HTMLやCSSを書き込む他、ウェブからのイメージの読み込み、外部CSS、Webフォントな...
その他 ブラウザウィンドウを画面単位にスクロールさせるjQueryプラグイン「fullPage.js」
アップルなんかがよく使ってる見せ方でお馴染みの、ブラウザウィンドウを画面単位にスクロールさせるjQueryプラグイン「fullPage.js」。前にも似たようなものを紹介したんですけど、こちらは横方向にもスクロールさせられるのと、各セクショ...
ウェブ制作 使い勝手の良い背景スライドショーのjQueryプラグイン「Vegas Background SlideShow」
ウェブページのバックグラウンドでスライドショーをさせるためのjQueryプラグインはいくつかありますが、その中でもなかなか使い勝手の良いのが「Vegas Background SlideShow」。トランジションが24種類と多く用意され、画...
ウェブ制作 CSS3を使った様々なアニメーションのスニペットを紹介するサイト「AniCollection」
CSS3を使ったアニメーションを一覧で確認できて、目玉アイコンのクリックでコードスニペットを見られるサイト、「AniCollection」。また「+」アイコンをクリックすれば複数のアニメーションをまとめてCSSなどを生成できるのがすごく便利...
ウェブ制作 ウェブ制作にいろいろ役立ちそうなスニペットを集めたサイト「CodeMyUI.com」
ウェブ制作でちょっとしたときに役立ちそうなスニペットを集めたサイト「CodeMyUI.com」。CSSを使ったちょっとした装飾からイメージスライダー、イメージギャラリーと様々な用途で使えるコードを判りやすいサムネイルで一覧表示させてるので、...
ウェブ制作 各種テンプレートやCMSのテーマなどを集めたギャラリーサイト「Template Stash」
WordPressやBootstrap、各種テンプレートやテーマを集めたギャラリーサイト「Template Stash」。「Hand-picked templates & themes.」なのだそうで、手動で集めたからクオリティが高いものが...
ウェブ制作 ナビゲーション・メニューを集めたギャラリーサイト「NavNav」
良い感じのナビゲーション・メニューを集めたギャラリーサイト、「NavNav」。見ているだけで勉強になるし、Tumblrを利用して公開しているのでフォローしとけば安心だし、CodePenで動きとソースを確認出来るものが多いので便利だし、ナビゲ...
ウェブ制作 【Web Design】ブラウザウィンドウの縦幅100%毎にスクロールさせる方法
ブラウザウィンドウの縦幅100%で背景画像を固定してスライドさせながらスクロールさせるエフェクト、って説明しづらいけどアップルなんかがよく使ってる見せ方ですね。ああいう見せ方を簡単にできないかなと思って探してみたら良い感じのを見つけました。...