Tagged

Webデザイン

A collection of 37 posts

Webデザイン

Webデザインにおける『正直』とは

素材に正直であれ Webサイトの品質 [http://www.yasuhisa.com/could/article/what-is-website-quality/] には、高い技術と表現を盛り込むという『上を目指す品質』と、どのような状況でも必要最低限の見た目と操作性を保証する『地を固める品質』の 2 つがあると説明しました。しかし、これだけではなくデザインにおける普遍的な考え方も品質に大きく関わっています。 ドイツのインダストリアルデザイナー Dieter Rams（ディーター・ラムス） [http://bit.ly/2iY9meS] が提案する良いデザインの十ヶ条 [http://www.yasuhisa.com/could/article/braun-apple/]の中には、良いデザインは正直である という項目があります。製品を必要以上に大げさに見せるのではなく、ありのままを伝えること。素材や形状を生かし、機能を明確に伝えることをラムス氏は『正直』と捉えています。 Web デザインに限ったことではありませんが、素材に正直であることは良いデザインには欠かせないことです。こ
Webデザイン

Webデザインシステムはじめの一歩

CSS フレームワーク活用のタイミング Bootstrap [http://getbootstrap.com/]、Foundation [http://foundation.zurb.com/sites.html] をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex [http://gridlex.devlint.fr/] のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
Webデザイン

Webならではの表現を見つけるために捨てるべきこと

面白いから実装で良いのか コンテンツや利用者体験を重要視する動きは Web でもネイティブアプリでも見られるものの、Web サイトデザインにおいては空回りしているように見えることがあります。ときには Web サイトよりネイティブアプリのほうが良いと思われてしまうような表現や手法が使われていることも少なくありません。 上から下へスクロールするという多くの利用者が期待するユーザビリティでさえ、パララックスデザイン [http://www.creativebloq.com/web-design/parallax-scrolling-1131762] という表現によって破壊されていることがあります。パフォーマンスが重要視 [http://www.yasuhisa.com/could/article/peformance-is-design/]されているのかと思いきや、10 以上の JavaScript ライブラリを組み合わせた重たいサイトも未だにあります。それも「面白い表現」「ネイティブアプリのような見た目」を実現するためだけに実装されていることもあり、利用者には負荷がかかることがありま
Webデザイン

15年前の記事が教えてくれるWebの本質

[http://www.yasuhisa.com/could/content/images/wordpress/2015/04/dao.png] 2000年4月7日「A Dao of Web Design [http://alistapart.com/article/dao]」という記事が A List Apart で公開されました（日本語訳 [http://all-web.org/ala/dao/]）。今年は公開から 15 年経ったということで、Web 開発・設計の著名人がコメントを寄せた記念記事 [http://alistapart.com/blog/post/15-years-of-dao] も配信されています。道教の教えを基に Web デザインの本質を説いたこの記事は、
Webデザイン

デザインを増幅させる 今使えるWeb技術

コンテンツをスマートにする [http://www.yasuhisa.com/could/article/for-intelligent-content/] には、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。 マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。 Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Ajax で動的な見せ方をするだけというのは過去の話なわけです。
Webデザイン

今のデザインに必要とされるコントロール

本当にコントロールできないのか WD101シリーズ [http://www.yasuhisa.com/could/tag/wd101/]の最初に、Webデザインは見た目のコントロールができない [http://www.yasuhisa.com/could/article/wd101-nocontrol-in/] という話をしました。スクリーンの大きさが多種多様なだけでなく、利用者が見た目や操作性を自由に変えることができる Web。DTPのような感覚でサイトをデザインしても、誰かの Web アクセスの利便性を損なうと指摘しました。 デザイナーはある種、混沌とした状態から秩序を生み出す能力をもっていると思います。バラバラになった情報を整理して一貫性のあるメッセージを伝えたり、混雑した Web の世界に明確な道筋を示す仕事をしています。秩序を作り出すということは、ある程度のコントロールはなくてはならないわけです。 コントロールすることがデザイナーの仕事であるとすれば、『コントロールができない Web』との相性がよくないように見えますし、デザイナーにとって非常に仕事が難しい環境のように
Webデザイン

良いWebサイトのなかにある静と動

シンプルな言葉のなかにあるニュアンスの違い 「なぜ、Web サイトが必要なのか？」 とてもシンプルな質問ですが、回答は様々です。 「利用者にとって良いコンテンツや体験を提供したいから」という回答をする人もいるでしょう。しかし、この模範解答のような言葉でさえ、人によってニュアンスが異なります。特に、マーケッター寄りの人と人間中心設計を実践している人では『良い Web サイト』の捉え方が大きく異なります。 マーケッターの視点で Web サイトをデザインするとは、どういうことでしょうか。彼等が考える「良いコンテンツ」は、サービスや製品を購入してもらうための説得材料です。写真、映像、文章、機能リスト・・・、こうした要素は、説得するために必要だと考えています。顧客が Web サイトへ訪れることによって、「買ってみようかな」と思ってもらえるような画面に設計することが重要だと考えられています。 それでは、人間中心設計の視点で Web サイトをデザインすると、どうなるでしょう。彼等が考える「良いコンテンツ」は、サービスや製品を利用することで、どのような感情が生まれるのか、どういった体験が待っ
Webデザイン

コンテンツからはじまる新しいWebワークフロー

4月27日にCSS Nite in AOMORI Vol.7 [http://cssnite.studiomd.jp/vol07/] が開催されました。毎年、 来青させていただいています [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/] が、CSS Nite として参加するのは今回で 2 回目になります。今回は コンテンツからはじまる新しい Web ワークフロー と名付けて、コンテンツの設計をしっかりしないと、モバイルをはじめとした他デバイスに向けて Web サイト制作をしても意味ないよというメッセージを込めた講演を行いました。そして、コンテンツを基軸にして画面構成やビジュアルデザインを組み立てていく新しいワークフローの提案も行いました。 今までこのサイトでも何度かプロトタイプ [http://www.yasuhisa.com/could/?s=%E3%83%97%E3%83%
Webデザイン

Fireworks後のツールとワークフロー

Fireworks 以外の選択肢は？ Adobe Creative Suite が終了し、Cloud の一本化が発表 [http://www.adobe.com/jp/cc/letter.html] されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 [http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html] のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。 Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしい