Web制作フローの再考とDesigning in the browser
多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
twitter の新ロゴデザインが美しすぎて調べてみたら、黄金比で構成されてた。｜楽しければいいのです。susi-paku web
twitter のトレードマークである青い鳥が新しくなりましたね。前回のロゴよりも美しい曲線で描かれており、公式のプロモーションともに圧巻でございました、これこそデザインだわーっとね。 そんな感じで朝から影響を受けまして、どのように構成されて描かれているのか調べてみたら、Apple のロゴと同じくやっぱり黄金比で作られておりましたよというお話。 ツイッターの新ロゴデザイン登場。 皆さんおなじみの青い鳥がリニューアルしたとの どくさんからTL が流れてまいりまして、さっそくサイトにアクセス！ Twitter / Logos & Brand プロモーションを見ていたら、『これはすごい！』っと朝から大興奮でございました。 前回のロゴに比べてスタイリッシュになりましたね。 Twitter、ロゴを変更--テキストをなくし、鳥のイラストも一新 - CNET Japan そんな新しいロゴはP
米国のデザイン教育から学んだこと デザイン会社 ビートラックス: ブログ
はじめに教授からのWhy? Why? Why?と立て続けに押し寄せる「どういったロジックを元に〜をデザインしたのか？」という質問の嵐に対して、学生達がBecause, Because, Becauseと素早く理論を構成して「何故なら〜だからです」というロジックを組み立て続ける。 そんな米国大学で展開されるデザイン講義を目の辺りにしてきた僕は、「デザインとはこんなにも理論的なプロセスだったのか」という率直な実感を持っています。 デザインと聞くと生まれ持った才能を存分に発揮してクリエイティブに様々なものを生み出していくというイメージをお持ちの方も多いかも知れませんが、これは全くの誤解であると言えます。 本来、デザインプロセスとは問題解決を前提としているため、地味な作業の連続であり、非常に理論的なプロセスで構成されています。 僕は日本で5年間、米国で3年間デザインの教育を受けましたが、実感として
非デザイナーも知っておきたいデザインにある葛藤とホンネ
去年から恒例イベントになっているWebSig 1日学校。古い学校の校舎を使って正に学校で学んでいるような気分で参加できるこのイベント。今年は「デザイン視点のコミュニケーション術」というタイトルで講師をさせていただきました。主催者からの依頼が非常に難易度が高く、扱うトピックからスライドの完成まで悩みながら作りましたが、そのプロセスで見えたところもたくさんあり、イベントも含めて学びと出会いがたくさんありました。 なぜ『作る』以外について語ったのか デザイナーの仕事はレイアウト、UI、ルック&フィールなどを作る人。コンセプトや潜在的にあるものを視覚化出来る人と捉える方が多いと思います。作り出すことがデザイナーの能力ではありますが、語られる部分が「作る」という部分に集約してしまいがちです。しかし、実際のところ「作る」部分というのはデザイナーの能力のほんの一部でしかなく、それ以外が重要だったりします
あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
クリエイティブディレクターへの道 : LINE Corporation ディレクターブログ
クリエイティブディレクターの原です。 現在、採用情報ページのWebクリエイティブディレクター（広告制作、サイト制作）にて募集中ですが、クリエイティブディレクターの仕事内容について紹介します。 1. クリエイティブディレクターとは？ ライブドアで「クリエイティブディレクター」という肩書きが新設されたのは2010年2月からで、現時点では私一人しかいません。就任時に通知された人事発令によると「※ 広告タイアップ案件において、企画・制作・ディレクション業務を統括し、顧客満足度向上を担う責任者を『クリエイティブディレクター』とする。」とのことでした。 2. 企画・キャンペーン広告とは？ 広告収益モデルであるライブドアには、通常枠広告、コンテンツマッチ、検索連動etc…、いくつかの売り上げ区分がありますが、私が主に担当するのは「企画・キャンペーン広告」と呼ばれています。前述したのはクライアントから納品
The Colors of the Web's Superbrands [INFOGRAPHIC]
What colors do the web's most powerful brands use to distinguish themselves from others? The folks from COLOURlovers decided to find out, producing the infographic below as the result. As it turns out, web brands love color. Only a few of them are predominantly grey or black and white. The most popular color is blue (nearly all big social networks use it), followed by a variety of reds and oranges
![The Colors of the Web's Superbrands [INFOGRAPHIC]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b04c2b554ed6387a85747d451baf3729ab04a340/height=288;version=1;width=512/https%3A%2F%2Fhelios-i.mashable.com%2Fimagery%2Farchives%2F03M58495jQWd6nbl0kFJyRS%2Fhero-image.fill.size_1200x675.v1647019021.jpg)
Design with Intent Toolkit
Design with Intent: 101 Patterns for Influencing Behaviour Through Design by Dan Lockton with David Harrison & Neville A. Stanton Toolkit wiki This wiki accompanies the Design with Intent card deck which is free to download or can be ordered in printed form {coming very soon}. At launch (April 2010) it's pretty much just an online version of the cards, but in time I hope it'll evolve into a deeper
デザインを知るきっかけを作る Design with Intent
イギリスのデザイナー Dab Lockton 氏が中心になって開発されたDesign with Intent は、デザインをより深く考えるのに便利なツールキットです。カードがリリースされたのは今月ですが、プロジェクト自体は 2008 年から続いている長いプロジェクト。何度か形を変えたり、コンテンツが加わって現在の形になりました。 このツールキットはブレインストーミングやアイデアをつくるための材料として作られたそうですが、ひとつひとつ読むだけでも勉強になります。カードサイズであることから文字数も限られているので、英語でもさらっと読める感じ。101枚あるカードは8つのカテゴリ (視点) に分類されています。ダウンロードページには 101 枚分まとめてダウンロードするリンクと各カテゴリごとにダウンロード出来るリンクの 2 パターンが用意されています。以下が、分類カテゴリとその要約です。 建築的
「Webを支える技術」。Webアーキテクチャを知り、Webサービスを設計するための一冊
日本にREST（Representational State Transfer）と呼ばれるWebのアーキテクチャスタイルを広めた山本陽平氏から、「本を出版するので送りたい」という連絡をいただいたのが約1カ月前。送られてきたのがこの本「Webを支える技術」でした。 山本氏のブログを拝見すると、約1年ほどはこの本の執筆に取り組んでいたご様子。中味を読んでみればそれも納得です。 本書はWebを支える3つの技術、HTTP、URI、HTMLを中心にWebのアーキテクチャを詳しく解説することから始まり、Webのアーキテクチャに沿ってWebアプリケーションや（広義の）Webサービスをどう適切に設計していくべきなのか、という、Webアプリケーションを開発するときに必ず考慮しなければならない課題を解決する道筋を教えてくれます。 Webアプリケーションをどう設計するべきか、大事なことなのに、これまでこれほど十
新聞・雑誌風レイアウトでみかけるウェブデザインの12のトレンド
新聞・雑誌風レイアウトのニュース系ウェブサイトでみかける特徴的な12のトレンドをVandelay Designから紹介します。 Trends in News and Magazine-Style Web Design 1. ホワイト（明るい）背景 新聞・雑誌風レイアウトのサイトではコンテンツの比重が高く、ホワイトか明るい背景にする傾向があります。それは一般的にリーダビリティのために良いことです。 もちろん、例外もあります。しかし、メジャーなニュース系ウェブサイトではほとんどがホワイトの背景を使用しています。 True/Slant 2. グリッドベース 新聞・雑誌風レイアウトのサイトのレイアウトには、グリッドベースのレイアウトが採用されています。多くのコラムやテキストが配置されるため、グリッドはこういったタイプに非常に効果的です。 グリッドはコンテンツを適度なスペースで配置し、より読みやすく
UXの測定項目を考えてみた
日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビ
【IT Japan 2007】「デザインに凝ったウェブサイトほど予約率は低かった」，星野リゾート社長が講演：ITpro
「我々はついつい旅館やホテルのウェブサイトを格好良くしよう、きれいにしようと思ってしまうが、それが必ずしも予約率向上にはつながっていなかった」 リゾート施設運営を手掛ける星野リゾート（長野県軽井沢町）の星野佳路社長は7月9日、東京都千代田区のホテルニューオータニで開催中の「IT Japan 2007」で講演し、こう語った。講演の題名は「収益向上を狙うネット・マーケティング戦略 『科学的仕組み作り』で顧客数を拡大」というものだ。 星野リゾートは、本拠地である軽井沢の温泉旅館「星のや」をはじめとして、大型スキーリゾートから小規模温泉旅館まで12施設の運営を手掛ける。星野社長は、前近代的な日本の旅館・ホテル経営の世界に、顧客満足度調査やシックスシグマによる業務改善など科学的手法を持ち込み、不振に陥ったリゾート施設の再生を実現してきた。 最近、力を入れているのが、ウェブサイトを経由した予約獲得だと
第1話 JAXA/SELENE「moonbell」 - このアートディレクターに聞く 第38話 東泉一郎 - MdN Design Interactive
このアートディレクターに聞く 常に新しい表現を追い求める 第38回 東泉一郎 旬のアートディレクターをお迎えして、デザインする際の思考のプロセスと創作のスタンスに迫るコーナー。第38回目は、数々のプロジェクトで常に新しい表現を追い求めてきたアートディレクター、東泉一郎さん。第1話では、宇宙航空研究開発機構（JAXA）のWebサイトで展開されている、月面の地形データを利用した「moonbell」にフォーカスする。 第1話 JAXA/SELENE「moonbell」 学術とデザインの融合プロジェクト ●周回再生モード 周回探査衛星「かぐや」が収集した月の地形情報を、音程およびグラフィックに変換して音とヴィジュアルで再生。このモードでは衛星が飛行する軌道に沿って地形が音に変換されていく ●「フリースクラッチ」モード あたかもDJがレコード盤をスクラッチ（擦る）するように、ユーザが月の表面情報を自
第3話 スーパーマイルド、パッケージリニューアル - MdN Design Interactive
ファミリーユースで広く知られる「スーパーマイルド」は、20年以上の歴史を持つロングセラー商品。その名の通り「やさしい（＝mild）」のほかにも「シンプルでいいもの」といった性格を持つ商品で、多くのファンがいます。今回「純国産オーガニックハーブ」が配合されることに伴いパッケージが一新されることになりました。 このときは、以前からのボトルを流用したのですが、一番変化した部分は以前よりハッキリさせたロゴです。以前のロゴはもう少し細いラインのものでしたが、これをシンプルだけどハッキリとしたものにしたいと思いました。もうひとつはオーガニックハーブを思わせる色です。パッケージのみならず店頭グラフィックなどにも共通するのですが、かわいらしくもキャッチーな通称「ハーブグリーン」を活用することで、新しいスーパーマイルド感を形作りました。本来、パッケージのリニューアルでは、イメージを大きく変化させることによっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Digital Art by Rifani Muhammad Syaferi
世界のウェブデザイン
https://www.splashnology.com/blog/inspiration/398.html
http://japan.internet.com/ecnews/20100428/8.html