こんにちは、haruです。 今回はweb制作現場で頻繁に使われる用語についてまとめてみました。 WEBデザイナー、業界の方ならばよく耳にする用語ではないでしょうか? またその言葉の裏に隠された意味にもツッコんでみました。 笑って楽しんで読んでいただけたらうれしいです。 それではどうぞご覧ください。 Vol.05 Web制作現場頻出用語辞典デザイナー編vol.1 次回は7月中頃に更新です!お楽しみに…。
ウェブデザインにおけるカラーのグリーンの重要性を学び、実例を見ながら制作における効果的な使い方や気をつけたいポイントを紹介します。 Anatomy of Colors: How to Create Eco-Friendly Green Website Anatomy of Colorsのシリーズは前回、ホワイトを紹介しました。 ウェブデザインにおけるカラーのホワイトの重要性と効果的な使い方・気をつけたい4つのポイント 最近はデスクトップの壁紙もベタ塗りグリーンなので、今回はグリーンを紹介します。 以下、グリーンの各ポイントを意訳したものです。 グリーンの重要性 グリーンの基礎知識 ウェブデザインにおけるグリーンの使い方 グリーンを使うことの意味 グリーンの文化的な背景 さまざまなグリーンの使い方 グリーンを使ってみよう グリーンの重要性 インスピレーションを与える最もよい情報提供元は何です
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか?私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います! SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M
こんにちは。 バランスにこだわったシンプルなサイトは見ていて飽きないものです。 今回は、白と黒をベースに作られたシンプルですごいWebサイト10個ほど選んでみました。 Kenji Saito Kenji Saito氏のポートフォリオです。 動きを含めバランスも非常に優れています。Flashじゃないのがまたすごい… Mac Pro ゴミ箱などいろんなネタにはされましたが、相も変わらずサイトのデザインは素晴らしいですね。恐れ入ります。 サイト1枚で製品の良さを存分に説明できてますね。 すごいうぇぶ [browser-shot url=”http://sugoiweb.nezihiko.com/” width=”550″] 見た人が口を揃えて「すごい!」といってしまうサイト。面白法人カヤックの佐藤ねじ氏の作品。 本の書き出し 書き出しの1文だけで本を選ぶ事が出来るサイトです。 日本語をうまく使っ
ゲームを語るにあたって、趣味で語る分にはそれ自体が楽しみでよいので何だって良いが、仕事でやるなら同じところをグルグル語るのがは時間のロスだから、言語化、細分化しておきたい。 毎回ゼロから一発勝負はバクチとして割が悪すぎる。 ゲームを考えるにあたって、「フレーバー(雰囲気、キャラ、世界観、シナリオ)」「システム(ゲームルール、プログラム的システム)」「ボリューム(物量)」に分けて考えるのも、「どれの話かによって、それぞれ対処と解決方法が違う」からで、これ混同したままだと同じところの話を何度もすることになってしまう。 狭義のゲーム性を例に出すことがあるのも、焦点を絞ることによって解決が簡単になる事があるから。 難しいとか簡単とかマニアックとかカジュアルとかは「針の振り加減の問題」でしかなくて、ド糞マニアックなシステムを導入しても、それをカジュアルに表現することは出来るし、ゲーム内での効果によっ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
競合に負けないWebサービスをつくるため、UI(User Interface)、UX(UserExperience、ユーザー体験)にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです! 目次 基礎知識 1.UXのためのUIデザイン 2.UX is not UI 3.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編 応用編(Webサイト) 4.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編 5.コンテンツで改善する UI デザインの極意 応用編(スマホアプリ) 6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編(タブレットアプリ) 7.ニコニコ超デザイン-
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
おともだちのWebデザイナーの灰色ハイジちゃん @haiji505 に 『Googleネイル』をやってもらいました。 ハイジちゃん。 @haiji505 「昔からやってみたいとは思っていたんだけど、Webネイルははじめて」とのこと。 『Googleネイル』をやってみたい! 『+1』ボタンとか Nexusのアイコンとか ドロイドくんネイルにしたいな♡と、わくわくしながら教えてくれました。 『ドロイドくんネイル』 この単語だけでもうかわいいですね。わくわくっ。 Googleネイル! それではさっそくハイジちゃんの『Googleネイル』をご紹介します。 ドン! ドロイドくんネイル! いましたいました! 親指にAndroidのマスコットのあの「ドロイドくん」が。 photo by haiji505 on Instagram ドロイドくんがふたり。 photo by haiji505 on Ins
In the increasing trend in web design towards perfecting the ideal user experience, interface design always plays a key role. Last week we published 10 major trends we took from our eBook "Web & Mobile Trends for 2013", among which content-first was the key idea. The interface, being relatively superficial, coud be the second most important to consider. And in the visual world in which we live, if
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です! フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
ハリウッド映画の脚本はだいたいが「お使いを果たして帰還するもの」になっており、それによって量産することが可能になっています。なのでポスターも量産できるよう、ある程度のパターン化がされているわけですが、ここまでかっちり分かれているとちょっと不安な気もします。 1. 真っ赤な唇のどアップ 2. スーパーヒーローはギリギリの所に立つの基本 3. 背中とお尻、顔を同時に見せることができる見返り美人ショット。 4. 最初は孤独な主人公が出てくる映画はベンチが基本 5. 背中合わせのポーズのよくありますね 6. 目隠しバージョンも人気 7. 自然ドキュメンタリーと青色の組み合わせ 8. インディーズ系の魅力は黄色 9. 黒と白、そして炎はアクション映画の印 10. ミステリー系に多いモザイク処理 11. 心の葛藤を描く映画は「目」が重量です 12. インスピレーションを掻き立てる白い海 13. 狭い裏
本日より予約受付開始 ! 『DOG DAYS』より、 「ミルヒオーレ・F・ビスコッティ」! 先日お伝えした通り、実はこの姫様は3DCGで原型制作を行いました! 今日は原型が出来上がるまでの制作風景を、特別に記事にしちゃいますよー!! 普段あまり語られることがない部分なので、けっこう貴重なものになる気がします。ドキドキ…。 そんな興味津々な私に色々と教えてくれるのは、ミルヒ担当の「世界のオダP」! / ̄ ̄\ / .ー ー \ ← 世界のオダP | (●) (●) | | (__人__) | 「 上手く説明できるか分かりませんが、がんばってみます!」 | `i i´ | | . `⌒ } ヽ } ヽ ノ / ヽ よっしゃ ! 早速いってみよー ! ! 【1】 キャラクターの決定 (企画担当) 今回の題材は、『DOG DAYS』 から
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く