デザインを開発するという視点でお伝えするクリエイティブBLOG
YouTube関連のスクリプトを今まで「YouTubeへのリンクを一目で見分けるGreasemonkeyスクリプト「embed YouTube」」や「YouTube 動画ページで「詳細」を省略せずに表示するGreasemonkeyスクリプト」と紹介してきましたが、今回紹介するものはさらに踏み込んだもので、YouTubeをもっと便利に使う為のFirefox拡張機能「Better YouTube」です。
この「Better YouTube」を導入すればYouTubeの動作をかなり細かい所まで設定する事ができます。
YouTubeが国内が問わず大人気で様々な動画が集まっている事から、そこの中から動画を紹介する事自体をコンテンツとしているWEBサイトやブログが多数存在します。
単純にリンクを教えてくれたり、埋め込んで紹介してくれる所もありますが、中には広告テキストリンクと絡めて紛らわしい表現をしている所も多々あります。そこで今回紹介するのはそんな紛らわしいリンクをYouTubeへのリンクかどうか一目で見分ける事を可能にするGreasemonkeyスクリプト「embed YouTube」を紹介したいと思います。
少し前にYouTubeの動画欄のレイアウトがかわり、動画の詳細が省略され埋め込みタグが動画下に表示されるようになりました。これはこれで便利なのですが、個人的には右側に表示される従来のタイプになれきっていたので最近違和感を感じていました。今日はそのYouTubeの表示の問題を解決してくれるGreasemonkeyスクリプトを紹介したいと思います。
このスクリプトを用いる事で上記のハイライト部分が省略されなくなります。これで以前のようなレイアウトでYouTubeを利用できます。
スクリプトは「Youtube Videos moreinfo – Userscripts.org」の右サイドバー最上部の「Install this script」をクリックすればインストールが開始されます。標準だとYouTube日本版に対応していないので下記にしたがって設定してください。
1.インストール後ステータスバーにいる猿を右クリックして、「ユーザスクリプトの管理」をクリック
2.「Youtube Videos moreinfo」を選択
3.「ユーザスクリプトを実行するページ」欄の「http://www.youtube.com/watch?*」をクリック
4.ダイアログボックスが出てきますので「*youtube.com/watch?*」へ修正
ものすごくニッチなスクリプトですが、個人的に求めていたものだったので紹介しました。普段からYouTubeを使っていて何となく違和感がある方は使ってみてください。
以前表示されているWEBページからスポイトツールで色を抽出できるfirfox拡張機能を「WEB上のカラー情報を取得できるFirefox拡張機能「ColorZilla」」という形でお伝えしましたが、今回は表示されているページに使われている色を丸ごと取得してカラーパレット化してくれるfirfox拡張「Palette Grabber」を紹介したいと思います。
使い方は非常に簡単でステータスバー左下の上記のようなパレットアイコンをクリックするだけです。この拡張機能が便利なのは色をカラーパレット化するだけではなくてワンタッチでカラーパレットをaco形式で書き出せる点です。Photoshop、Paint Shop Pro、GIMPなどの有名なドローソフトはこのaco形式に対応していて読み込ませる事が可能です。
下記のの画像は「designdevelop」のカラーパレットをphotoshopで読み込んだものです。
参考にしているページのカラーパレットがあれば、デザインしていく上でかなりイメージに近づけやすくなるんじゃないかなと思います。WEBデザイナーなら押さえておいても損は無い拡張機能だと思います。
カメラやテレビ、ラジオなど最新の形ではなくてシンプルな少し昔の形をしたらレトロな表現をベクターデータが今回紹介する「Retro Vector Icons」です。このアイコンセットでは一昔前の形で様々な物を表現しています。
視覚的には古さを感じる物もありますが、歴史があるからこそ認識しやすいという利点が気がします。そういう意味では何らかの機能を示すアイコンの原型なんかには使えそうです。
詳しくは以下
WEBでもグラフィックでもメニューの内容や機能などを端的に表現する時に便利なピクトグラム。シンプルながらもデザインを機能的にブラッシュアップしてくれる効果的なものですが、今日紹介するのはシンプルなピクトグラムをフォントとして使える「Erler Dingbats」です。
こちらはDingbatsフォントの一種で様々なピクトグラムがフォントセットとしてまとめられています。収録されているフォントの種類は以下からご覧ください。
詳しくは以下
アイコンは、デザイン制作に持っておくと便利な素材の1つ。非常にさまざまな種類がインターネット上でダウンロードできるようになっています。そんな中今回は、ちょっと個性的なアイコンセット「Cute User Avatar Icon Set」を紹介したいと思います。
世界のいろいろな人の表情や特徴を表現することができる、可愛らしい雰囲気が特徴のアイコンがセットでダウンロードできるようになっています。
詳しくは以下
便利に活用することで、webサイトの操作性が抜群に上がるwordpressはとても便利な存在。高い頻度で利用されている方も多いのではないでしょうか？そんな中今回紹介するのは、使いやすいレイアウトのデザインが揃った最新wordpressテーマ集「Best of WordPress: 10 Free Themes」です。
WordPress › Libretto « Free WordPress Themes
10種という厳選された数ではありますが、使いやすさが考慮されたレイアウトのテーマが揃っています。
詳しくは以下
高機能なjavascriptライブラリとして広く使われているjQuery。多くの方に使われているだけあって幅広いプラグインがリリースされていて、WEBをもっと便利に使いやすくしてくれます。今日紹介するのはjQueryを使った、テクニックとプラグインをあつめたエントリー「40 Useful jQuery Techniques and Plugins」です。
ナビゲーションに使えるプラグインからカレンダー、フォームなどといったものまで幅広いジャンルのプラグインが紹介されています。今日はその中から気になったものをいくつか公開したいと思います。
詳しくは以下
デザインの手法の一つであるデュオトーンは、絞り込まれた2色で構成された色彩が何とも魅力的。今回ご紹介するのは、そんなデュオトーンの完成された色彩をワンタッチで楽しむ為のグラデーションプリセットをまとめた「60+ Free Duotone Photoshop Gradient Presets」です。
60ものデュオトーン用のグラデーションがまとめられた、デザイナーの為の使えるプリセットです。
詳しくは以下
(続きを読む…)
多種多様なフォントが世の中には出回っていますが、今回紹介するのはプロでも使えそうなデザイン性の高いハイクオリティなフォントを集めたエントリー「50 Incredible Fonts for Professional Web & Print Design」です。
全部で50個のフォントが紹介されていますが、今日はその中から気になったフォントをいくつかピックアップして紹介したいと思います。
詳しくは以下
さまざまな機能が追加され、より効率的にデザインワークが進められるようになっているIllustrator。しかし、デザイナーによって機能の使い方は大きく異なり、更に利用できる機能を全てチェックするというのは至難の業。そこで今回紹介するのが、Illustratorのさまざまな機能や技が学べるチュートリアルをまとめた「Illustrator Tutorials: 70+ Awesome Hot New Tips」です。
Astute Graphics Blog : How to Create Vector Denim Texture Using Adobe Illustrator
タイポグラフィの制作からポスター・ポストカードの制作まで、さまざまなチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
動物をモチーフとしたアイコンは幅広く存在し、デザインによく使用されるものの一つなのではないでしょうか。今回ご紹介する「Extinct animals project (Free)」では、一風変わった他にはない動物アイコンとなっています。
絶滅危惧種をテーマとして集められたアイコン。動物だけでなく、魚や虫などもまとめられています。
詳しくは以下
SMASHINGで罫線のクリエイティブを競うコンテスト「The <hr>-Contest Results – Download your fresh <hr>-line now!」が行われていて、世界中で384人のデザイナーから1290のイメージとソースファイルが集まったそうです。
応募されたhrの一部
本当に様々な罫線が集まったようですが、現在25種類の罫線で決勝が行われていて、読者から投票を募っています。今日は最終に残った罫線を紹介したいと思います。
詳しくは以下
