Webデザインの参考
ロゴ会社のブログで、各有名メーカーのロゴタイプの変遷をインフォグラフィックにしたものが、掲載されていました。 時代の流れと共に変わっていくロゴが一目でわかります。ひとつの会社だけを見るのではなく、こうやっていくつものロゴの変化をみると、それ…
主要SNSの画面レイアウトサイズ Facebook Twitter Google+ YouTube LinkedIn Pinterest 上記SNSの画面レイアウトをまとめた記事がありました。 2012年11月の状況なので、現在もこのままかどうかは不明ですが、参考にはなると思います。 The Ultimate Complet…
デザインを扱うブログのトップ100をランキングした記事があったので紹介します。 Alexaランク Twitterフォロワー数 Facebookファン数 で、ランクを集計しているようです。いくつかをちょっと見てみただけなのですが、ブログデザインや写真・イラスト・インフ…
Webサイトがブックマークレット「Wirify」でモックアップに Webサイトからワイヤーフレームを生成し、Webデザインの勉強に役立てられるブックマークレット「Wirify」です。 Wirify 使い方 「Wirify」をブックマークツールバーに入れます モックアップしたいW…
「この画像のイメージっていいな」と思った時に、画像から自動的に色を抽出してくれるカラーパレットを4種類ご紹介します。 自分のイメージを膨らませるのにもいいし、実際のWebサイト制作にも使えると思います。 Color Palette Generator Color Palette Gen…
スクリーンショット(キャプチャー画像)をとる Webデザイン勉強中で、Webデザイン系のブログを書いていると、Webサイトのスクリーンショットを取る機会が多いと思います。 方法はいろいろありますが、私は以下を使うことが多いです。 窓フォト ・・・フリー…
Wix.comがついに日本語で新登場 Wixは、イスラエル生まれの無料オンラインウェブサイト作成サービスです。 テンプレートを選んで、簡単なドラッグ&ドロップでサイトをカスタマイズするだけで、まるでプロ顔負けのWebページが作成できます。 ただ、英語やド…
jQueryのレスポンシブ・スライダーが使いたい時のために、メモしておきます。 ◆基本的なjQueryイメージスライダー シンプルで軽量な、jQueryイメージスライダーです。 ソースのダウンロード ◆レスポンシブサムネイル ギャラリープラグイン サムネイルがコ…
スマートフォン・ソーシャルメディア・WordPress 昨日、うちから一番近い図書館に、このインプレスムックがあったので借りて来ました。書店で見て、「買いたいけど高いなぁ」と思っていた雑誌です。 一番近いと言っても、「車10分+フェリー30分+車30分」か…
liteAccordionのバリエーション 普通に目にするサイトで、この横スライドメニューを使ったサイトを見かけなかったので、記録しておきます。 (単に私が目にしなかっただけだけです)Hilton HHonors™ - MyWay Benefits Gold
Parallax Slider with jQuery 使ってみたいスライダーなので、メモしておきます。 DEMOサイト HTML <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"> <div class="pxs_bg1"></div> <div class="pxs_bg2"></div> <div class="pxs_bg3"></div> </div> <div class="pxs_loading">Loading images...</div> </div>
Mondrian - HTML/CSS Facebook Template 海外のテンプレート販売サイトThemeforestを眺めていたら、いかにもMondrianなテンプレートを見つけました。 白、赤、黄、青の四角を、太めの黒の枠線で囲んだら、たちまちモンドリアンになります。 モンドリアンの絵…
WhatFont Toolとは WhatFont Toolは、サイトを閲覧していて「このフォントは何を使っているんだろう?」と思った時の疑問に答える、Google Chromeの拡張機能です。 WhatFont Tool 上記サイトから、Chromeの拡張機能、またはブックマークレットでお試しくださ…
Gunosy(グノシー)って何? Gunosy(グノシー)は、TwitterのツイートやRTの内容、FacebookのLike情報や、はてなブックマークの情報などのデータから、興味や関心を分析して、1日一回ニュースを届けるサービスです。 Gunosy Gunosyについて書いているブログ…
Responsivator Responsivator レスポンシブデザインのサイトを制作する時に、複数のサイズ表示を同時に確認できるツールです。以前練習で作ったレスポンシブのサイトを入れてみました。 表示を確認する際に便利ですね。 サイズ変更 表示サイズの変更も可能で…
HEATFACT 30秒のTVCM。 スマートフォンやタブレットを操作するイメージで、CMが進行していきます。 スマホはここまで浸透して来ているのですね。 誘導先のサイト HEATFACT サイト自体は、特にスマホフレンドリーではない気がします。
Simple Grid レスポンシブWebデザイン対応のシンプルなCSSフレームワークです。 Simple Grid Content Columns Layout Columns
チュートリアルサイト 動画のチュートリアルで、サンプルも用意されています。【Photoshop】コーディングする時のスライス方法とか - CSS HappyLife
基本のアクション使用方法 Dearps 〜Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです〜 » アクション使用方法【基本編】 バッチ処理 フォトショップ : 大量の画像を、自動で補正、サイズ変更、保存するバッチ処理 - Goodpic 無料Photoshopアク…
これ、使ってみたいなぁ・・・ jQuery Destaque
IDE(統合開発環境) 統合開発環境(とうごうかいはつかんきょう)、IDE (Integrated Development Environment) は、ソフトウェアの開発環境 従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境(多く…
WordPressのデフォルトテーマTwenty Elevenについてのメモです。 Twentye Eleven の日本語訳 Twenty Eleven テーマ内の説明を日本語訳しました | 8bitodyssey.com Twentye Eleven のレスポンシブ構造の図解 Twentye Elevenは、#pageのmax-width: 1000pxとcss…
Kube Framework Kube Framework 超軽量(min:16KB)のフレームワークで、LESSバージョンもあります 全てのモダンブラウザの最新版、IE8+、モバイル用のブラウザに対応 デモページはすっきりとまとまった、端正な顔つきのデザインです。 デモページ CSSHórus …
CSS拡張メタ言語とは CSS拡張メタ言語はCSSの言語自体を拡張し、CSSには存在しない機能を追加します。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加することができます。 「Les…
Facebookソーシャルプラグインの種類 Facebookソーシャルプラグインは11種類 Social Plugins-Social Plugins いちばんよく見るLike Button 必要事項を入力し、コードをゲットします。 参考サイト いいねボタンを設置 - 求職者支援訓練Webデザインの勉強 | 風…
Twitterのツイートを視覚化するツール「Twisualise」が面白かったので、ご紹介します。 Twisualise | See Your Twitter :) 試しに、Milla Jovovichのアカウントを入れてみました。 Data Overview 100ツイート(デフォルトで、数値は変えられます)のうち、青…
男性と女性、物の見え方に違い 最新の研究によると、女性は色の違いを見分けることに優れ、男性は素早く動く物体を目で追ったり、遠くの細かいものを見分けたりすることが得意だという。 同じ色相を知覚するのに男性は女性よりやや長い波長が必要 波長は長い…
HeartRails Capture Webサイトのサムネイル画像/PDF ファイルを生成するAPI 「サムネイル画像のURL」と、「貼り付け用タグ」が生成されます。 下記は、「貼り付け用タグ」をそのままコピペで記載しました。
デザイン ウェブサイトの背景について 最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ | コリス デザインを見る デザイナー必見!アナタにとっての『見たことも無いデザイン』を探すことが出来そうなサイト色々! | バンクーバーのうぇぶ屋 …
★ Jérôme Détraz - Designer multimédia ★ スライダーを使用したミニマルデザインのサイト ★ Jérôme Détraz - Designer multimédia ★ Fajne Chłopaki :: Portfolio :: Studio graficzne インパクトのあるトップページと、縦スクロールで整然と並べられた作品…