『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
プログラマーの中には盲目の人もいる。その一人、Ed Summers氏は30歳で視力を失い、現在はソフトウェアエンジニア兼アクセシビリティ専門家として働く傍ら、盲導犬 Willieのブログのゴーストブロガーもやっている。目の見えない人がどのようにしてコードを書くのか不思議に思う人もいるだろう。生まれながらにして盲目のFlorian Beijers氏の場合、普通のDell Inspiron 15R SEノートパソコンと、彼が信頼するオープンソースのスクリーンリーダー「NVDA」があればコードを書くだけでなく、一般的なパソコン操作は問題なくできるという。彼は「これが盲目のコンピューターユーザーのニーズに適応するもののすべてだ」と述べているが、ちょっとした希望としては「あなたが次に素晴らしいUIとワークフローを搭載した大きなアプリケーションを書くとき、要素の一つとしてアクセシビリティを考慮していた
ナビゲーションやボタン、スライダー、画像、テーブル、フォームなど、さまざまなUIエレメントが揃ったワイヤーフレーム用のPSD素材を紹介します。 Create Wireframes in a Snap with Wireframe Pro: Free and Premium Versions [ad#ad-2] Wireframe Pro Free版の中身 Wireframe Pro Free版のダウンロード方法 Wireframe Pro Free版の中身 「Wireframe Pro」は有償のPremium版と無料のFree版の2つがあります。 ここでは気軽に利用できる無料のFree版を紹介します。Free版もレイヤーが保持されたPSDです。 Premium版はエレメントは400種類、PSDは33ファイルです。
はじめに 中学生たちに「なぜプログラミングが必要なのか」を教えてみた - WirelessWire News（ワイヤレスワイヤーニュース） この記事を読んでの感想になります。 将来的に3Dプリンタが家庭内で普通に使われる時代には、きっとプログラミングの必要ないUIができているはずです。 テレビがリモコン一つで操作できるように、電子レンジが前面のパネルボタンだけで操作できるように、炊飯器がボタン一発でおいしいご飯を炊くように。逆にそうでないと、家電として家庭内に3Dプリンタが普及するわけがありません。 しかし、テレビのリモコンボタンの数が増え操作が複雑になる一方であることからわかるように、シンプルなUIで家電の機能の全てを引き出すというのは無理があります。 紹介記事中にある、 プログラミングをできるようになるということは、人類の叡智を利用できるようになるということ は至言です。 プログラミン
モバイルアプリのUIパターンを手軽に参照できるリファレンスの第2版。デザイントレンドの変化に対応して全面改訂。主要なプラットフォームで動くモバイルアプリの画面例を1,000点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する83個の基本パターンと7個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。 掲載UIパターン：ナビゲーション、フォーム、テーブル、検索、並べ替え、フィルター、ツール、グラフ、誘導、ソーシャル、フィードバック、アフォーダンス、ヘルプ、アンチパターン 監訳者まえがき 序文 まえがき 第1章 ナビゲーション 1.1 主要なナビゲーションのパターン（永続的） 1.1.1 Springboard（スプリングボード） 1.1.2 Cards（カード） 1.1.3 Li
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? by @mixiappwchr アプリ向けのAPIの開発時に気をつけてもらえるとうれしい＆メンテナンスや実装コストが下がる点をつらつら書きます。 データ構造について データを返すとき、一定のルールを守って返す。例えば当然ですが同じデータ構造はもちろん、似たような構造もルールを作ってproperty名などそろえておく。relationやlistで返すときもどのデータ構造なのかがpropertyで明確にわかるようなっているようにする listを返す場合の形式やpagingが必要な場合の形式はそろえる。配列のデータがない場合も考慮しておく。例
Webデザインのカラー、レイアウト、エフェクトなどのアイデアに困った時に時間をかけて見たいサイトのまとめ
使いやすいアプリを作るための、とても簡単で、確実な方法があります。 それは、ユーザの問い合わせに対応することです。具体的に言うと、問い合わせが気軽にできるようなUIにして、そこで得た情報源を元にUIを分かりやすく改良していく。(機能追加とはまた別の話) ただ、直感的に感じるように、これは手間がかかるのでたくさんの人は逆のことをしようとする。つまり、ユーザヘルプを設置して、問い合わせ先は出来るだけ発見しにくい洞窟の奥深くに設置する。 でも、問い合わせには、アプリの利便性向上につながるヒントが豊富に隠されています。ユーザがどんな問題やニーズを持っているかのヒントもザックザック出て来ます。ザックザックです。 アプリ開発にとって、やったことがいい事は星の数ほどあって、そのどれもをやろうとすると時間やお金がいくらあっても足りません。だから、”やったほうがいい事”の優先順位は常に意識して、メリットとそ
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。 iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。 今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。 Android Lollipop UI Kit Material Designは、デスクトップ・スマホ・タブレットをはじめとするさまざまなデバイスで直感的に操作ができるよう新しいUXのアプローチです。Androidにも全面的に採用されています。 Android 5.0: Lollipop 今回紹介するのは、そんなLollipop用のさまざまなUIコンポーネント・エレメントが揃ったPSDとSketch用の素材です。
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
これまではどちらかと言うとDBやWeb APIみたいな開発作業が多かったけど、最近はHTML/CSSを触るようないわゆるWebデザイン的な作業をする機運が高まってきた。あんまりちゃんとやったことが無いために年始から色々と考えてて、まあその結実としてキャプチャ撮ると捗るという体験があったので書き残しておく。ちなみにキャプチャは無い。あとでデザイン変えたやつ公開したら過程を整理して紹介できると良いと思う。 過程を残すと意見をもらいやすい 『藤村龍至 プロトタイピング-模型とつぶやき』という本の中に、プロトタイプとして建築模型をつくっていく過程の話がある。与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していく。この方法には、設計者以外の人でも設計過程を見
AngularJSやTypeScriptサポート、モバイル対応、グリッドやグラフなど業務用JavaScriptコントロールを備えた「Wijmo 5」、グレープシティがリリース グレープシティといえば、VBXと呼ばれたVisual Basicのカスタムコントロールの時代からソフトウェアコンポーネントに強いベンダとして知られています（当時の社名は「文化オリエント」でした）。 その同社が、ECMAScript 5に準拠し、AngularJSやKnockoutJS、TypeScriptなど最新のJavaScript技術との連携を強化したソフトウェアコントロール「Wijmo 5」（ウィジモファイブ）をリリースしました。 Wijmo 5の「5」はJavaScriptの新しい仕様であるEcmaScript 5からとったもので、ECMAScript 5のgetter/setterでコンポーネントのプロパテ
ユーザー「3DS無くした(;_;)」任天堂「自己責任 再DL？乞食乙」 3DS紛失。 サポートに電話するもDLソフトの再DLなどについての質問にはのらりくらりで回答せず。仕方ないのでメールで問い合わせ ↓ 任天堂2日も放置 ↓ ようやくメールの返事が届く ・（ネット周辺の）仕様は社外秘 ・なので質問は一つも答えません ・あとはマニュアル読んで、買い直ししたけりゃお好きにどうぞ ・警察から要請あった状態で、もし修理でうちに届いたら捜査協力してやってもいいぞ ※ソース 任天堂への質問 http://acubens-house.hatenablog.com/entry/2014/09/24/185840 任天堂の回答と、回答への返事 http://acubens-house.hatenablog.com/entry/2014/09/26/191949 5: 名無しさん必死だな＠＼(^o^)／ 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く