2012年2月16日 福井工業高等専門学校で行いましたデザインセミナーでのスライドです。Read less
![Webデザインのセオリーを学ぼう](https://cdn-ak-scissors.b.st-hatena.com/image/square/b92de021693ab6c786d508f1d8d9b74f76bdeecc/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2F20120216designseminar-120216052356-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 1.アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
レスポンシブにデザインしたサイトを作った際に役立ったこと(主にスマホ対応)を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト:1024px以上用(PC用)の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用(タブレット用)の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用(タブレット/スマートフォン用)の記述 */ } @media scre
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
UXのプロが岡目八目で切り込むのが快感今回、「UXデザインパッケージ」のサービスを体験してみたわけですが、結論から言うと、「さすがUXのプロ」という面と、「まさに岡目八目、外部に頼む価値」という面とがありました。 アドバイスは、現状のWeb担の見せ方をかなり大幅に変えるというものでした。つまり、現状をある意味で否定された形なのですが、それに対して違和感は抱きませんでした。というのも、そうするべきだとして示されている理由が理路整然としていた納得できるものであり、さらに自分でも薄々は感じていた「そうだよね」という部分をえぐられていた内容も多かったからです。 たとえば、アドバイスでは、「移動中などにスマホで友人のフィードで見かけた記事などが気になり、でもそのときは読まずにあとから読む」といった行動にうまく対応できるようにと指摘されています。 これは、言われなくてもわかっているはずのことです(実際
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス?かっこ良さ?奇麗さ?良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって? 最良の方法? 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選:Webサイト作成手順を勉強するまとめ(3)(1/3 ページ) 新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。 前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトに
Webデザイナーのためのマーケティング基礎講座 1. Webデザイナーのための マーケティング基礎講座 Marketing Basic Course for Web Designers 2. ∼自己紹介∼ 名前: 枌谷 力(そぎたに つとむ) 所属: 株式会社ベイジ 職業: 代表/プロデューサー/アートディレクター 略歴: 立教大学文学部史学科卒。1997年∼2001年まで株式会社 NTTデータでコンサル営業に従事。その後、Web業界に転 職。Webデザイナー/Webディレクターとして6年間制作 会社でWebデザインやWebビジネスの提案業務に携わる。 2007年にフリーランスとして独立。2010年に株式会社ベ イジ設立。現在に至る。 Copyright©baigie inc. All rights reserved. 3. ∼本講義のゴール∼ “マーケティング視点”で デザインが見れるよ
僕の日本人クリエイター専用シェアハウス『Frog House』の住人の一人が、BCITという名門IT系専門学校へ通っているんですが(彼のような日本人クリエイター留学生の話は来月のセミナーでしたいと思ってます)、そこの課題にどうやら自由な発想でワイヤーフレームを作ってこいみたいな課題が出たらしく、先日『ワイヤーフレーム作る時に使ってる物や参考になるサイトは無いか』と聞かれたので、こりゃ住人に良いカッコするチャンスと思ったから書く、という不純な気持ちで書いています(笑) でも、思っても見たら今までワイヤーフレーム系のネタで書いた事も無いし、良い機会なので、僕が知ってるワイヤーフレームを描く時に便利そうなツールやサイトを、この機会に全部まとめておこうかなと思います。 制作ツールは勿論のこと、素材サイトや確認ツール、なんか色々独断と偏見からワイヤーフレーム描く時便利そうって思える物ばかり紹介する(
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの
こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日(水)に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン&マナー設計」にて登壇させていただきました。 皆さんは「トーン&マナー」という言葉を耳にしたことがありますか?「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン&マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン&マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!
そのページの先頭へ移動する要素として設置しているところも多い「ページの先頭へ」や「ページトップ」がユニークなサイトのショーケースです。 コーポレートサイトのような堅めのデザインをする場合は凝り過ぎると浮いてしまう場合があるのでシンプルなものを使用することが多いと思いますが、ちょっとしたキャンペーンページやイラストをふんだんに使っているようなサイトであれば、こういった細かいところにも動きを付けてあげると遊び心があって面白いですね。 April 19, 2014 追記 @OZPAさんから教えていただいたものを含め、他にもユニークなものがあると教えていただいた3サイトを新たに追加しました。 株式会社LIG [リグ] 注意:効果音が出ます 「ページの先頭へ」や「ページトップ」の要素がどうののレベルではなく、クリック後の動作など全体的に非常にユニークで、むしろこだわり過ぎと思うくらい凝ってます。 少
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
「ユーザビリティを意識することが大切!」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか? ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください! 【事例】1つのボタンを変えただけで、年間300億の売上増!売上に直結するユーザビリティとは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く