The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
今回はIllustratorで歯車を描きます。アピアランスなので、編集も簡単。数値を変えるだけで、バリエーション豊かな歯車を作ることができますよ。タイヤなんかにも応用できるので、ぜひお試しください! 完成予定図 使用ソフト:AdobeIllustratorCC(CS5で検証済み) Step1 楕円を描いてギザギザさせる まずは楕円形ツールで元になる円を描きます。 楕円形ツール/Ellipse (L) 高さ(H):100px 幅(W):100px この先はアピアランスを使っていくので、アピアランスパネルを表示(Ctrl+F6 ・Shift+F6)させておきましょう。 アピアランスパネルが無事開いたところで、次は楕円の縁をギザギザさせていきます。アピアランスパネル下メニュー「fx(新規効果を追加)」をしてジグザグを適用。 新規効果を追加>パスの変形>ジグザグ Add Effect > Dist
1: 以下、名無しにかわりましてVIPがお送りします 2013/10/18(金) 19:32:52.04 ID:GThOxmlw0 マジかよ… 2: 以下、名無しにかわりましてVIPがお送りします 2013/10/18(金) 19:33:31.79 ID:QPQFZ/uL0 F2は? 29: 以下、名無しにかわりましてVIPがお送りします 2013/10/18(金) 19:44:44.58 ID:ei8r6FYa0 >>2 35: 以下、名無しにかわりましてVIPがお送りします 2013/10/18(金) 19:45:50.85 ID:/CCgFhAg0 >>29 サイドスティックだな 3: 以下、名無しにかわりましてVIPがお送りします 2013/10/18(金) 19:33:50.63 ID:0NG23u8M0 ジュース出てきたりしないの? というか給水ってするの? 6: 以
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー1:現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか? 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」(=影)の基本ルールです。
TOP > Design > CSS3で立体的なボタンを表現するチュートリアルまとめ「40 CSS3 Animated Button Tutorials And Experiments」 HTMLに装飾を加えるためのCSSは、2011年頃から登場したCSS3によって表現力が劇的に向上。しかし、新しい機能や表現方法をフル活用できていないという方もいらっしゃるのではないでしょうか?そんな中今回紹介するのが、CSS3で立体的なボタンを表現するチュートリアルをまとめた「40 CSS3 Animated Button Tutorials And Experiments」です。 (CSS Buttons with Pseudo-elements | Codrops) シンプルなボタンはもちろん、デザインソフトでの制作でも時間がかかりそうなリアリティのあるボタンまで、多彩なCSSデザインが紹介さ
最近すこぶる調子の悪かった iPhone 5 の電源ボタンがほぼ完全に逝きました。100回くらい強く押し込めばたまに反応するのですが、基本的には電源を一度切ってしまうと、電源ボタンからの復帰は不可能なくらいのレベルです。 そんな故障してしまった iPhone 5 。 通常なら Apple Store の Genius Bar の予約をして本体交換というのが一番賢いやり方かなと思いますが、NDA的なテストマシンとして使っていた iPhone 5 ということもあって持ち込んでも修理は受け付けてもらえないのも目に見えているので、このまま文鎮として使うか、なんとか知恵を絞って使いこなすか迷ってみたりもしたんですが、文鎮にしては軽量化が激しすぎて使えないので、結局 iPhone として使ってみることにしました。 というのが経緯。ま、どうでもいいですね。 要は、iPhone の重要な機能を担う「電源ボ
Deep Dungeons of Doom(Ver1.0.2) 体験無料 iPhone/iPadの両方に対応 課金:ステージ解放(250円)、アプリ内通貨・コンテニュー(なくてもクリアできる) 開発:Bossa Studios 評価:3.5 + アイテム・キャラクター・特殊能力の組み合わせで変化するプレイスタイル + 攻撃ボタンと防御ボタンだけのシンプルな操作だが、アクションとして楽しめる + レトロな雰囲気のビジュアル + ダンジョン内で手に入れたアイテムをやりくりするローグライクな楽しさ ローグライク(不思議なダンジョン系)のような面白さと、スマホならではのミニゲーム的な手軽さを両立して、プレイが止まらない。 久々に「ヤバイ!」と思わせるゲームが登場した。 今年に入って指折りの面白さで、ゲームキャストが自信を持っておすすめする1作だ。 ▲懐かしい雰囲気のグラフィックだし、ちょっと手を出
文章作成がマジで快適!キーボードに矢印キーがくっついたテキストエディタアプリ『Arrow Note』の使い心地が良すぎるぞ
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
CSS3でこんなクオリティのボタンが作れる! みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの ようなエレメントが豊富にあります。 タイトルよく分からんですねw CSS3のグラデーションやbox-shadowなどを駆使して、今まではPhotoshopで作成していたかのようなクオリティのボタンなどを作った!みたいな記事を多々見かけてきたかと思いますが、そういったものだけを集めたデザインギャラリーです。 一見よくあるパーツデザインギャラリーや、dribbbleっぽい感じですが、これらのボタン等は全てcssで作成されています。それだけでなく、ソースも公開されていますので結構重宝しそうなサイトですね。 こんな立体感のあるボタンとか。 こんなソーシャルボタンとか。 ソース
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く