GUIの歴史とこれから - MdN Design Interactive
GUI（ジーユーアイ）とはGraphical User Interfaceの略で、大雑把に言うと多くの人が利用するPCやモバイル端末の画面のことです。ボタンやアイコンもGUIを構成する要素であり、これらの要素をクリック/タップするだけで操作ができます。 今回はGUIの歴史についてのお話です。 2019年9月25日 TEXT：上田 恵 スキューモーフィズム 古くは2000年代もしくはそれ以前から、iPhoneでもiOS7以前まではGUIとしてはスキューモーフィズムのデザインが主流でした。 スキューモーフィズムとは平面なディスプレイの世界に凝った質感や奥行きの表現を与えることで実世界を模倣し、ユーザーにとって直感的に操作できることを目指したデザインです。 例えばボタンには影をつけて凹凸を表現し押せるイメージを持たせたり、アプリケーションの雰囲気によっては金属や木目などのテクスチャを使い機械や木
UI/UXがイケてる！おすすめスマホアプリ - 第4回 Yummly - MdN Design Interactive
Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！おすすめスマホアプリ 第4回 Yummly 2015年3月19日 TEXT：佐藤洋介（株式会社サイバーエージェント） より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的効果を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第4回目では、Yummlyの公式アプリを取り上げる。 Yummlyとは、ユーザーの食の好みと連動した、レコメンドされたタイムラインフィードを作成してくれるサービスである。おすすめ料理はもちろん、食材から検索することも可能な、できすぎたレシピブックのようなアプリだ。 料理好きなユーザーだけでなく、厳選された料理の写真を眺めているだけでついつい見とれてしまうYummly。細部にまで配慮されたレシピブック的な世界観を感じながら、そのすぐれたUXをひも解いて
IllustratorをWeb作業に最適化するためのポイント - Illustrator ABC - MdN Design Interactive
Illustratorは印刷系に強いソフトウエアだと思われがちですが（実際そっちの機能のほうが充実してるんですが）、設定をきちんと調整することで、Webなどのピクセルベースの作業も正確におこなえます。 ※記事内に、『Illustrator ABC』の関連ページが記載されています。そちらもご覧いただくと、機能やメニューについての理解が深まります。 【例】 レイヤーについては ABC→P78
即戦力となるアナログ表現の技を押さえる - MdN Design Interactive
腕のいいデザイン事務所で修業しないと ふつうは身につかない知識と技と心得 10 即戦力となるアナログ表現の技を押さえる 解説： 高橋としゆき［Graphic Arts Unit］ url： www.graphicartsunit.com/ 使用ソフト: Photoshop CS3 かすれや汚れなどといった、アナログの演出がデザインで必要になる機会は多いはずだ。そうしたアナログ感の演出にはさまざまな方法があるが、基本的な手法はしっかり身につけておきたい。ここでは、デジタルだけでアナログ感を表現する方法を紹介しよう。 実際にプリントアウトして作業する時間や環境がない場合や、画材などを使ったアナログの作業を経ずに、もっと手軽にアナログ感を表現したいということもあるだろう。アナログ風の質感はPhotoshopのフィルタなどを駆使して表現することもできるので、そうした技を使った多彩なアナログ表現を覚
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
iPhone 4S/4買ったらまずはじめに買いたい! iPhone 4S/4ケース情報総まとめ - MdN Design Interactive
初出：2010年6月23日／最終更新：2011年11月22日（一部修正） TEXT：MdN Design Interactive編集部 いよいよiPhone 4の発売が明日になりました! 6月24日のiPhone 4発売に備え、すでにApple Store銀座やソフトバンク表参道店に並んでいる人も出始めています。6月15日からの事前予約で、ショップから入荷の電話をもらった人も、まだ電話が来ないでドキドキ中の人もいることでしょう。いずれにしてもiPhone 4を買ったらまずはじめに買いたいのがiPhone 4用のケースですよね？ そこでMdN Design Interactive編集部では、iPhone 4の発表以降、いままでに発表または発売が開始されたiPhone 4ケースをご紹介します。色や素材などであなたのiPhone 4を自由に彩ってみてはいかがでしょうか。 ※編集部註：新製品の情報
iPhone 4、ホワイトモデルの登場は「later this summer」？ - MdN Design Interactive
modmyi.comは6月15日から予約開始となるiPhone 4について、当初はブラックモデルのみで、ホワイトモデルの登場が「later this summer」（今夏の遅く）とされているようだと書いている。 同サイトの書き込みによれば、入手した米AT&T社の従業員へのメールにはiPhone 4は16GBと32GBのブラックモデルのみ事前予約を受け付けること、そして16GBと32GBのホワイトモデルは「later this summer」（今夏の遅く）と記載されている、としている。米AT&T社は米国国内でiPhone 4を販売しているキャリア。 なお、iPhone 4の予約は6月15日から日本でも行われるが、ソフトバンクモバイルの（株）の発表では現時点では黒のみとされている（参照記事「iPhone 4は4万6080円から! 15日17時より受付開始」）。現時点で同社から正式な発表はないが
MdN Design｜総合情報サイト
ケータイサイト制作・運用からマーケティング活用まであらゆる情報を網羅! 今“ 知っておくべき”ケータイサイト制作事情 第3回 これからケータイサイトの制作に本格的に取り組もうというクリエイターのためにケータイサイト制作のツボと最新情報をお伝えしていく連載第3回目。今回は、これまでどのような形でも、なかなか切り込むことができなかったであろう「ケータイサイト制作の最新の効率化」というテーマを扱っていく。
web creators | 特集記事 | デザインってオモシロイ -MdN Design Interactive-
Copyright © 2010-17 MdN Corporation, an Impress Group company. All rights reserved. デザインってオモシロイ -MdN Design Interactive-
MdN Design｜総合情報サイト
専門知識を必要としないケータイサイト制作が始まっている ケータイサイト制作には、PC向けWebサイトの制作にはないさまざまな配慮が必要になる【1】。もとをたどれば、小さな端末に機能を盛り込むための規格への対応やユーザーの利便性向上のためのケアなのだが、PC向けのWeb制作やサイト運用の現場感覚からすれば、めんどう以外のなにものでもない。それが嫌でケータイサイト制作を敬遠するWebクリエイターを著者は知っている。かけるコストと工数を抑えながら、これら「ケータイ専用の配慮」をどうやってクリアするかは開発・運用のひとつの焦点だ。 ひとつの回答がFlashによるWeb制作だ。事実、FlashはWebクリエイターとケータイサイト制作を結ぶ大きな懸け橋になっている。トップページのFlash制作からケータイサイト制作に参入したというWebクリエイターは多いのではないだろうか。ページデザインの自由度の高さ
MdN Design｜総合情報サイト
WEBのネタに困らないクリエイターになろう！ デザインアイデアが続々わき出る3ステップ＆トレーニング クリエイティブなものをつくりたいけれど、新しいデザインや斬新なアイデアはそうそう生まれるものではない。本特集は、デザインの基となるネタを集め整理し、それを並び替えたりするなど、目に見えるカタチへアレンジすることで、新しいデザインを生む方法を3ステップ形式で紹介する。
MdN Design｜総合情報サイト
第4回「CSS3を使ったより強く、より良い、より手軽なデザイン」 2010年01月05日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：Stronger, Better, Faster Design with CSS3 http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/ 著者：ZURB 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSS3に関する前回の記事「Pushing Your Buttons With Practical CSS3」で、私たちはCSS gradients、角丸の囲み罫、ドロップシャドウなど、CSS3の新しいテクニックを使
はじめてでもできる！Twitter壁紙入門 - MdN Design Interactive
Web業界は、Twitterのサービス開始から使っている古参ユーザーが多いことで知られている。Twitterのページもカスタマイズされていて、見ているだけで楽しい。Twitterの画面はとてもシンプルだが、壁紙を設定したり、自由に配色を変更することができる。自分のページを魅力的でかっこいい（もしくは可愛らしい）デザインにアップデートすることが可能だ。本記事では、壁紙の作成、設定方法および注意点などを解説している。参考にして、人目を引くような壁紙づくりに役立ててほしい。 （2009年11月16日 文＝境 祐司） ［プロフィール］ さかい・ゆうじ●教育デザイナー。学校、企業の教育プラン、マネジメント、講演、執筆など。著書に『デザイナーなら絶対知っておくべき Webデザイン50の原則』ソフトバンククリエイティブ、『速習Webデザイン Flash CS4』技術評論社、『XHTMLマークアップ＆スタ
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
デザインとグラフィックの総合情報サイト MdN Interactive
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト
シーズン到来!! クリエイターのための確定申告 MdN Interactive - 特集4
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選