Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
無料でAndroid向けに使える1万5000種類のベクターアイコン集
メニュー、通知バー、ダイアログ、リストビューなどで使われるAndroidのアイコンを1万5000種類も詰め込んだセットが配布されています。アイコンのサイズはAndroidのユーザーインターフェイスガイドラインにのっとって3種類用意されています。 Android icons アイコンのキャンバスサイズは512x512、その中にアイコンが426x426で収まっています。 収録されているアイコンの一例はこんな感じ。 最下部の「Download Now」ボタンをクリックするとアイコンセットがダウンロード可能です。 ダウンロード時にはメールアドレスが必要となります。 アイコン集の中身。フリー版の場合、メニュー用とダイアログ用の2種類だけが利用可能で、フォルダ名に「only_in_comercial」と書いてあるものは中身が入っていません。 リストビュー用のアイコンなども利用したいという場合には19ド
無料で利用可能な400個以上のベクター＋PNG形式アイコン詰め合わせパック「Seven Icon Pack」
SVG形式・100×100、48×48、32×32のPNG形式で無料配布されているのがこの「Seven Icon Pack」です。400個以上（中身のファイルを見ると全部で478個）もの高品質なアイコンが入っており、かなり実用的なデザインとなっています。 ダウンロードは以下から。 475 Free & Awesome High Quality Icons For Designers SVG形式 http://www.tehkseven.net/news/475-free-vector-icons/icons_svg 32×32のPNG形式 http://www.tehkseven.net/news/475-free-vector-icons/icons_32x32 48×48のPNG形式 http://www.tehkseven.net/news/475-free-vector-icons
ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」
CCライセンスで提供されており、個人利用ならフリーのアイコンセットがこの「Legendora Icon Set」です。ゴミ箱がクリスタルで表現されていたり、ファンタジーRPGでよく出てくるようないかにもそれっぽいアイテムの数々がくっついてフォルダアイコンが揃っていたり、Firefoxのアイコンがあったり、見た目のかわいさと実用性とを兼ね備えた使いやすくバランスの取れたアイコンセットとなっています。 ダウンロードとその他の同じような雰囲気のアイコンいろいろは以下から。 Legendora Icon Set by *Raindropmemory on deviantART http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011 作者はRaindropmemoryさんで、以下がアイコンセットの中身を紹介した画像で
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
毎朝メイドさんからGoogleカレンダーの予定がメールで届く「メイドめーる」
「おはようございます、ごしゅじんさま！あっさですよぉー？本日の予定は～～となっております。あ、ところで今日の神戸の天気は雨のち曇だそうでございます。外出の際は、傘をお忘れ無くお持ちください。それでは、気をつけて行ってらっしゃいませ」というような内容のメールが届く無料サービス、それが「メイドめーる」です。 何はともあれ、詳細は以下から。 メイドめーる http://www.maidmail.jp/ Googleカレンダーに登録してある予定をメールで毎朝決まった時刻に送ってくれるというネットサービスで、届いたメールに対してメイドさんに話しかけるように返信メールすると、新しい予定がGoogleカレンダーに登録されるという一風変わった機能も搭載しています。 Googleカレンダーは既に利用しているとして、まずは利用登録から。メールアドレス、朝メールする時間帯（4時頃～12時半頃まで選択）、天気予報
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
700個以上の無料で使えるアイコン「Silk Icons」
サイトをデザインする際や、ソフトウェアのツールバーなどにも利用可能。いろいろな種類のアイコンがあるので、とりあえず持っておけばいつか役立つことは確実。 含まれている全種類のアイコンのプレビューは以下の通り。 famfamfam.com: Silk Icons Preview http://www.famfamfam.com/lab/icons/silk/preview.php ダウンロードは下記から。 famfamfam.com: Silk Icons http://www.famfamfam.com/lab/icons/silk/ ほかにもこのサイトには無料で利用できるアイコンがあります。 famfamfam.com: Mini Icons http://www.famfamfam.com/lab/icons/mini/ famfamfam.com: Flag Icons http://
デザイン性の高いファンキーなフリーフォント
擦り切れたような汚れがあったり、年代を感じさせるクラシックな雰囲気のものなど、デザイン性の高いフォントが集められています。 読む人間に与える印象をガラリと変わるので、インパクトを出したい人にはうってつけです。 詳細は以下から。西部劇に登場しそうなフォント「Fusty Saddle」 4種類の凝ったフォント「Petie Boy」 塗料がはがれたようになっているフォント「Heroin 07」 文字から触覚のようなものが伸びている「Inked God」 おもちゃのようにポップな「Elli Noise」 映画のタイトルなどで使われそうなフォント「Grunge Serifia」 手書きっぽい雰囲気のある立体的なフォント「Bobsmade」 この他、様々な味のあるフォントが以下で紹介されています。 30 New (Free) Grunge Fonts | Outlaw Design Blog - A
プロっぽくて編集しやすいフリーのウェブサイト用テンプレート配布サイト「TemplateYes」 - GIGAZINE
最近はブログなどを使ったサイトが非常に多いのですが、やはりきちんと作り込まれたサイトも必要なわけで。だからといってゼロから作るのは大変。そこで使えるのが、あとから編集してカスタマイズしやすい商用利用可能なフリーのウェブサイト用テンプレート。元となるPSDファイルなども付属している場合があるので、それぞれのパーツをかなりカスタムすることが可能となっています。また、全部Flashでできたサイト用のテンプレートなどもあります。 ダウンロードは以下から。 Free Website Templates, Flash Templates, CSS Templates - TemplateYes.com まずは各ジャンルごとにサンプルを見てみましょう。 ・PSDファイルとフォントまで付属した通常のウェブサイト用テンプレート ダウンロードはここをクリック ダウンロードはここをクリック ダウンロードはここを
右クリックから一発で好きなフォルダに移動できるフリーソフト「Shock Bookmark」 - GIGAZINE
Windows上でいろいろな作業をしていると、いつも使うフォルダというのがいくつか出てくるわけですが、そこへ移動するのが非常に面倒くさい。きっちり整理して分類すればいいのに、ついついデスクトップに放置したり、あるいは適当にマイドキュメントに放り込んだりしてしまいがちです。何とかして素早く目的のフォルダに移動できないものか？というときに使えるのがこのフリーソフト「Shock Bookmark」。 右クリックから一発で、あらかじめ登録しておいた目的のフォルダに移動できるようになります。これなら深い階層にあるフォルダにもサクサク移動できるので、今まで面倒だった各種ファイル整理や移動が格段に楽になります。フォルダ以外にも特定のファイルやURLを指定することも可能で、登録したフォルダにファイルをコピーしたり移動させることもでき、使いやすい割に高機能です。 ダウンロードとインストール、実際の使い方は以
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
