新Mac OS「Yosemite」のアイコンデザインはどのように変わったのか？
2014年6月3日に行われたWWDC14で最新Mac OSとなる「OS X Yosemite」が発表されました。ヴィジュアルのアップデートが行われたiOS 7に続いて、Yosemiteも曇りガラスっぽい質感のインターフェースや、新しいシステムフォントおよびアイコンなどヴィジュアル面が強化される予定です。そんな改良されたYosemiteのアイコンがどのように変化したのかが検証されています。 Inspecting Yosemite's Icons http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/ Yosemite以前のOS Xのアイコンデザインは、従来のガイドラインとヒューマンインタフェースガイドライン(HIG)の特徴を組み合わせたものでしたが、Yosemiteのシステムでは一貫してHIGに沿ったアイコンデザインに変
【保存版】作りたいイメージ別！ランディングページ 「デザインの指南書」 | LISKUL
どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行
Apple社のキーボードについてる「コマンドキー」アイコンの元ネタはコレだった
Apple社は時々大きなデザインコンセプトの変更を行う一方、シンボリックな要素については非常に大事にしてきました。「コマンドキー」アイコンは初代Macから残っているものの一つ。このデザインがどこから生まれたのか、デザイナーのスーザン・ケアが語っていました。 スーザン・ケアは初期のApple社のアイコンのほとんどをデザインしたグラフィック・デザイナー。「ハッピーマック」を始めとする、Appleの象徴的なアイコン群は彼女の作品となります。 Susan Kare – User Interface Graphics – Apple Mac Icons ちなみにこちらもスーザンの作品。 Susan Kare – User Interface Graphics さて、彼女が「コマンド」キーのアイコンを作ったのは初代マッキントッシュ開発中のこと。お絵かきソフト「MacDraw」のメニューを見たスティーブ
デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」
日々新しいものがどんどんと誕生しているデザインフォント。常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」です。 （firsttype.portfoliobox.me） デザイナーとして活躍されている方、デザインを手がけている方なら是非知っておきたいデザインフォントがまとめられています。 詳しくは以下 Neythal Free Font on Behance 手描きのような雰囲気も感じさせてくれるフォント。ラフ感や柔らかさを表現したい時に。 VAGTUR – Fontdesign on Behance アンティークなテイストを持ったフォントは、見本のようにレトロな質感を全面に取り入れたデザインにぴったりですね。 Choplin Free
Androidの｢マテリアル・デザイン｣をWebにも。グーグルが制作者用ツール提供
Androidの｢マテリアル・デザイン｣をWebにも。グーグルが制作者用ツール提供2014.06.26 06:00 福田ミホ すべての端末で共通のデザインを。 グーグルがAndroid Lの新しいデザインと、そのコンセプト｢マテリアル・デザイン｣を発表しました。このカードベースのデザインは、AndroidというOSの中で使われるだけじゃありません。Web上にも広がっていきそうなんです。 グーグルは｢Polymer｣という開発用ツールを使って、モバイル開発者向けデザインツールをWebサイト制作者向けにも提供しようとしています。実際新しいグーグルのデザインガイドラインはデヴァイスに依存しない内容になっています。それはスクリーンサイズの大小を超えて、タブレットやスマートフォンから腕時計まであらゆる端末で使えるようになっています。以下はマテリアル・デザインについての動画です。 このデザインがどれだ
クラシックで美しいデザインのスマートウォッチ登場
スマートウォッチだからって、ガジェガジェしいデザインでなくていいわけで。 従来の腕時計に近く、エレガントで柔らかいデザインのスマートウォッチがあれば使うのにな…。そう思ったことがある人、朗報です。自然なデザインのスマートウォッチWithings Activitéがまさにそれなのです。 メールやカメラなどの機能はついていないにしても、フィットネス端末としては十分。Withings Pulseというフィットネス・トラッキング・ガジェットとスイス時計が、まさにちょうどいいバランスで融合したと言えるでしょう。Withings Activitéは、歩計、移動距離、カロリー消費量、睡眠パターンをトラッキングすることができます。シンプルな使い方ならばこれで事足りますね。文字盤にある小さなメモリの方は、歩数、又は眠りの達成度を表しています。専用アプリWithings Health Mate（iOSのみ）に
Webページ上に通知を表示するjQueryプラグインの紹介
はじめに 利用者に短い文章などを提示して注意や操作を促す通知は、古くはWindowsのタスクバー（標準では右下）に表示されるバルーン表示、最近ではiOSやAndroidにおけるプッシュ通知の表示など、さまざまなシーンで利用されています。 本記事では、このような通知をWebページの内部に表示することができる以下のjQueryプラグインを紹介します。 noty（多機能な通知表示） Notific8（Windows 8風通知表示） CFToaster（AndroidのToast風通知表示） notyは通知にボタンを配置できるなど多機能であるのに対し、Notific8はWindows 8の通知を再現することに特化したシンプルな内容になっています。CFToasterはさらにシンプルで、AndroidのToastのようにメッセージ文字列を表示するだけのプラグインです。利用目的や表示スタイルにより使用す
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
いろんなブラウザ【5種】でサイト表示のチェックができるWEBサービスinteractive cross-browser testing - ネットの海の渚にて
browserling - interactive cross-browser testing ネットには探せば便利なサービスがあるもので上記のサイトは各種ブラウザで表示がどうなるのか確認ができる。 Internet Explorer Chrome Firefox Safari Opera 上記メジャーブラウザの5種をわざわざ自分のPCにインストールすること無く確認することができる。 さらに嬉しいことはそれぞれのブラウザのバージョンが新旧揃っていることだ。 使い方は簡単だ。 表示させたいURLを入れて好きなブラウザを選ぶ。 新旧のバージョンが出てくるからそれをクリックするだけだ。 しばらくすると入力した条件でエミュレートされる。 （画像では当ブログのURLを入れてSafariのバージョン5.1を選択している） 実際に表示させるとこうなる。（画像はSafari5.1） これを各種ブラウザで繰
あなたの色彩感覚をテストできる「Online Color Challenge」
日本人の場合、女性の500人に1人、男性の20人に1人が色覚異常だと言われていますが、日常生活で自分の色彩感覚がどれくらいのものかを知る機会はほとんどありません。そんな色彩感覚をオンラインで簡単にチェックできるのが「Online Color Challenge」です。 Color Test - Online Color Challenge | X-Rite http://www.xrite.com/online-color-test-challenge Online Color Challengeは、色の明度・彩度をそろえた異なる色相の色コマを順に並べていくことで、微妙な色の違いを判断する能力を調べられる「Farnsworth-Munsell 100 hue test」を利用したテストで、ディスプレイのカラーキャリブレーションを簡単に行えるツール「i1Display Pro」を販売している
その二倍ダーシ、くっつきますか?
2009-07-27 ベタ組みしたときに、二倍ダーシがアキなく組まれるか コピー誌制作を加速する、手抜きのための情報 二倍ダーシとは 二倍ダーシ（二倍ダッシュ）とは「――」のこと。 ライトノベルで欠かせない、困ったときに付けるアレ（違。 ダーシを2つ並べたものです。 ダーシは Unicode: U+2015, Shift_JIS: 0x815c で表現される文字で、EM DASHと呼ばれたりもします。 フォントによってはダーシが仮想ボディいっぱいにデザインされていないため、ベタ組みで並べた場合にアキが生じてしまうのです。 そのデザインの善し悪しはわかりませんが、コピー誌制作においては悪以外の何者でもありません。 流し込んだらすぐ印刷しないと間に合わないの! とゆわけで、事前にアキが生ずるか否かを知っておけば多い日も安心。 このネタ、相変わらず温めていたら、プロの方に追い抜かれました orz
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ - コムテブログ
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 １．アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
Twitter新プロフィールのカバー画像制作用ガイドPSD、用意しました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、梅雨ですね。デザイナーのぺちこです。 Twitterのプロフィールページが新しくなって公開されてから、あっという間に2ヶ月ほど経とうとしています。 自ら変更せずとも順次適応ということで放置をしていたのですが、いつの間にか新しくなっていました。半月前くらいはそうでもなかったような。 先日お仕事でこのあたりを調べる機会があり、割と時間を費やしてしまったので、同じく困った人の手助けになればと思い、カバー画像制作用ガイドPSDを作成しました。 解説はさておき、ひとまずPSDを置いておきます。 Twitter新プロフィールカバー画像制作用ガイドPSDダウンロード では、さっそくTwitter新プロフィールの仕様おさらいをしながら、ガイドPSDについて解説していきます。 Twitter新プロフィールページについて 仕様については様々なメディアでリリース当初から取り上げられてきたので、詳しく
OS X Yosemiteの美しいコンセプトデザイン集
すっきり、ぺったんこー!! 先週WWDCでiOS 8と共に発表されたOS X Yosemiteですが、Mac用アプリのデザイナーたちもYosemiteに馴染むようなコンセプトデザインを次々と発表しています。 リリースにあたりOS X Yosemiteにソフトウェアを対応させるのはもちろんのことですが、フラットデザインを取り入れて違和感のないように溶け込ませるのも大切ですよね。デベロッパーは新しい拡張機能を使って、既存するアプリに機能を加えることもできます。 アップルは数ヶ月後にもOS X Yosemiteを一般公開するようですが、それまでにはたくさんのアプリがアップデートされているはず。もうデベロッパーの皆さんはその時に向けて準備を始めているでしょう。コンセプトデザインを公開できるDribbbleから、人気アプリのものを集めてみました。 Skypeログイン画面 Instagram for
サービスデザイン方法論 カスタマージャーニーマップ 2014年06月07日 - 隣り合わせの灰と青春
2014年06月07日（土）に行われた、 サービスデザイン方法論の第2回は「カスタマージャーニーマップ」で、 講師にコンセントの長谷川さん（@ahaseg）と坂田さん（mariosakata）を迎えて、 恵比寿のDMM.com様にて行われました。 昨年、大寝坊をして遅刻してしまったので、 どうしても受けたい講座でした。 →昨年の様子 http://www.hokorin.com/2013/07/20130608.html 講義 ▼What is Service Design? ユーザー価値＋ビジネスの実現 ＝サービスデザイン なぜいま改めてサービスデザインなのか？ →1900~1960「製造の時代」 ↓ 1960~1990「流通の時代」 ↓ 1990~2010「情報の時代」 ↓ 2010~「新しい顧客の時代」 ▼サービスデザインの定義 ・ビジネス -継続性 -意義 ・提供価値（バリュープロ
マークアップからWebデザイナーへ５つのお願い ｜ Qrious Blog
NEW こんにちは。マークアップの胡夢です。 わたしが個人で請けている、外部のWebデザイナーさんから送られてくるデザインデータで、「これだけはやめて欲しい」って事をつらつらと書いてみます(´・ω・｀)ｷﾋﾞｼﾒ 基本的にPSD（Photoshopデータです、一応念のため）を頂いて、そこからマークアップに必要な画像を切り出して使うのですが、毎回苦労する羽目になっておりまして、同じように苦労しているマークアップさんの声をTwitter等で見かけるので、「Webデザインをやるなら、これくらいは知って置いて欲しいなぁ」という内容をまとめてみましたので、記憶に留めてもらえると非常に有り難いです。 お願い【１】レイヤーについて ●レイヤーの結合はホントにヤメテ！ わたしが対応するマークアップ案件はこういったことはほとんど無いのですが、コーディングをしたことがないデザイナーさんでこれをやっちゃう方が居
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.nijilog.info/2014/05/09/178
3media.biz
波打つ漢字がおどろおどろしいホラー系フォント「ふぉんとうは怖い明朝体」NOT SUPPORTED
よりシンプルに手描き風にデザインされたBootstrapのワイヤーフレーム用のテーマファイル -Bootsketch