デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.
プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。
詳しくは以下
少し前に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を使っていて何となく違和感がある方は使ってみてください。
たくさんのフリーフォントが常に発信され続けており、どんどんと新しいデザインも登場してきています。そんな中今回は、デザイン性も高く、魅力的なフリーフォントが豊富に揃った「fontbundles / Premium Free Fonts」を紹介したいと思います。
さまざまな種類のフォントの配布をおこなっている「fontbundles」内にて、フリーでダウンロードできるフォントがピックアップされています。
詳しくは以下
デザイン構築に必要な素材として重宝されているアイコン。セットでいろいろな種類がまとまっているものが多数配布されており、さまざまなタイプをダウンロードしストックされている方は多いと思います。そんな中今回紹介するのは、UI構築に使用するための必要最小限のアイコンがセットになった「Essential Icons」です。
フランクフルトを拠点にアートディレクターとして活動するDaniel Swoboda氏によって提供、ベーシックに定番として頻繁に使用すると想定される種類のアイコンがまとめてダウンロードできるようになっています。
詳しくは以下
Photoshopパターンは手軽に模様を作り出すことができる、とても便利なツール。デザイナーの方は使用されることも多いのではないでしょうか？今回はそんなPhotoshopパターンの中でも、さまざまな柄や模様をテーマにした「20 Latest Useful Free Photoshop Pattern Sets for Designers」を紹介したいと思います。
Black And White Seamless Patterns 2 by ~cesstrelle on deviantART
シンプルな模様からリアルな質感のものまで、さまざまなパターンがまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。
詳しくは以下
複雑な情報を一目で伝えてくれるアイコンは、デザインに欠かせない存在です。ミニマルデザインやフラットデザインなどシンプルなデザインが流行するにつれ、使用する頻度も増えてきたのではないでしょうか。今回ご紹介するのは、そんなデザインに役立つアイコンを422種類もまとめた「handcrafted & pixel perfect icons.」です。
黒単色で描かれたシンプルなラインアイコン、ベタアイコンが多数取り揃えられています。
詳しくは以下
(続きを読む…)
様々なシーンで利用されている軽量かつ高機能なjavascriptライブラリjQuery。本当に色々な事が工夫次第で可能ですが、今回紹介するのはテキストをフェードインしながらマウスオーバーで色を変える「jQuery Glow」です。言葉で説明するとわかりづらいので、まずは下記からデモをご覧下さい
通常のテキストにマウスオーバーするとゆっくりとフェードしながら色が変わっていきます。
詳しくは以下
ユーザーとサイト運営者を結びコンタクトフォーム。個人、商用拘わらず、様々なWEBページで目にします。今日紹介するのは、フォームをもっと便利にしてくれる、フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」を紹介したいと思います。
Form Validation with jQuery from Scratch
フォーム自体を配布していたり、未記入の項目を分かりやすく教えてくれたりと様々なフォーム関係のTipsが公開されています。今日はその中からいくつか紹介したいと思います。
詳しくは以下
デザイン制作に非常に役立つphotoshopブラシは、いくつあっても嬉しいもの。今回紹介する「20 Free Useful Water and Cloud Brushes resource for Photoshop Users」も、非常に活用頻度の高いブラシセットまとめです。
（Water Brushes Sampler by ~FrozenStarRo on deviantART）
詳しくは以下
水が飛び散る様子、夏の日の空のような大きな雲など、さまざまな種類のブラシが紹介されています。いくつかピックアップしてみましたので、下記よりご覧ください。
特にwebデザイン制作で頻繁に使用するアイコンは、簡易的なビジュアルで意味を相手に的確に伝えることができるとても便利な存在です。今回はそんなアイコンをフリーで使用できるフォントを集めた「Free Icon Fonts for Web User Interfaces」を紹介したいと思います。
シンプルベースの、幅広く利用できるタイプのアイコンフォントが多数まとめられています。気になったものを以下にまとめましたので、ご覧ください。
詳しくは以下
手書き風フォントは少し前に「【FreeFont】女性の手書き風ひらがなフォント「アイコ」と「はるか」」と言う記事でお伝えしましたが、今日紹介するのは前回紹介した「アイコ」と「はるか」よりももう一段階柔らかい印象を受ける手書きフォント「あんずもじ」です。
「あんずもじ」はカタカナ、ひらがなだけではなくシフトJISに含まれる、漢字を全て網羅していて、さらに縦書き専用文字も入っています。様々なシーンで使えそうな使い勝手が非常に良い手書きフォントだと思います。
詳しくは以下
