web design

スポンサーリンク
ウェブ制作

モバイルアプリやウェブサイトのスクリーンショットを各種デバイスのモニタに合成してくれるサイト「Smartmockups」

すでに知ってる人が多いだろうけど、一応メモがてら記事にしときます。 モバイルアプリやウェブサイトのスクリーンショットを各種デバイスのモニタに合成してくれるサイト「Smartmockups」が便利です。 Smartmockups ちなみに用意...
Adobe CC

Kindleストアで「春は『デザイン』をきちんと学習」キャンペーン開催中、デザイン関連書籍が999円

AmazonのKindleストアで、デザインの基礎やデザイン制作アプリの参考書などが999円で購入できる「春は『デザイン』をきちんと学習」キャンペーンが開催中ですね。 期間は2016年3月10日まで。 下に個人的にお勧めな書籍をピックアップ...
その他

モバイルやウェブアプリなどのUIを集めたギャラリーサイト「Collect UI」

主にモバイルアプリや、ウェブアプリ、ウェブサービスなんかで使えそうなUIをたくさん集めているギャラリーサイト「Collect UI」。 わりと最近流行なカード型デザインなどが多い気がします。 Collect UI - Daily inspi...
ウェブ制作

モバイルアプリやウェブサイトのUIデザインギャラリー「UI Garage」

モバイルアプリやウェブサイトのUIデザインを集めたサイト「UI Garage」。 有名どころからマイナーなものまでたくさん集まっているので眺めているだけでも勉強になります。 UI Garage - Specific mobile and w...
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 ...
ウェブ制作

Bootstrap用のMaterial Designテンプレートが揃う「Material Design for Bootstrap」

個人的には最近ちょこちょこ増えている印象のMaterial Design案件ですが、制作時にずいぶん参考になる、というか、場合によってはそのまま使っても行けるんじゃねって思うBootstrap用のMaterial Designテンプレートが...
ウェブ制作

ウェブ系企業ブランドのSVGロゴデータが手に入る「Simple Icons」

一般的なウェブ系企業ブランドのロゴがSVG形式で一覧表示され、ダウンロードもできちゃう便利なサイト「Simple Icons」。 眺めているだけでも勉強になるし、必要なものはダウンロードまでできるなんて素晴らしい。 GitHub(danle...
ウェブ制作

そのフォントが使われているサイトをリストアップしてくれるサービス「FontReach」

フォント名を入力すると、そのフォントがどんなサイトで使われているかを表示してくれるサイト「FontReach」。 使われているフォントのランキングもあるのでちょっと楽しい。 FontReach デザインも綺麗だし、インターフェイスもシンプル...
iPhone・iPad

iOSやMacのアプリなどのデザイン事例や素材を集めたサイト「iOSUp」

マテリアルデザインの事例集として「MaterialUp」が有名ですが、その兄弟サイトとしてiOSやMacのアプリやアイコンなどのデザイン事例や素材を集めたサイト、「iOSUp」がオープンしたとのアナウンスが届きました。 ざっと眺めてみるとA...
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%で背景画像を固定してスライドさせながらスクロールさせるエフェクト、って説明しづらいけどアップルなんかがよく使ってる見せ方ですね。 ああいう見せ方を簡単にできないかなと思って探してみたら良い感じのを見つけました...
スポンサーリンク