デザイナーと働くなら知っておきたい4タイプのデザイナー像 | ベイジの社長ブログ
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
Webフォントのロードをやめた - 1000ch.net
2016.08.22 Webフォントのロードをやめた このサイトではフォントに Roboto と Roboto Mono を適用している。以前までは Google Fonts で配信されているそれぞれのフォントをロードしていたが、それをやめて font-family の指定のみに変更した。 プログレッシブな適用とOS共通フォントの選択 まず前提として、テキストのベースフォントとして明朝（serif）を、 <h1> ~ <h6> の見出しにはゴシック（sans-serif）を、コードには等幅（monospace）を適用する前提方針がある。明朝・ゴシック・等幅の中から自分の好みに近く、尚且つ Mac と Windows にインストールされているものを優先的に選ぶようにした。 body { font-family: YuMincho, serif; font-weight: normal; }
ウェブ組版は行間が基準なのではという話 - note
以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ
この世で最も識別しやすいもの ― デスクトップ用Webサイトのハンバーガーメニューを使った、アイトラッキング研究 | POSTD
この世で最も識別しやすいもの ― デスクトップ用Webサイトのハンバーガーメニューを使った、アイトラッキング研究 おそらく皆さんは、「ハンバーガーメニューの使用についての別の意見か。まさにそれが必要なんだ」と思いながらこの記事を読んでいるでしょう。Appleは 「あなたが使っていないといいのだが…」 と言い、Googleの製品デザインのガイドラインには 「賛成だ。しかしこのようにデザインしよう」 とあり、Jacob Nielsenは 「代わりにピザにしてみよう」 と言い、例はまだまだ続きます。しかし、ちょっと待ってください。誓ってもいいのですが、この記事は違います。これは、あなたが自身のサイトをデザインする時に、興味深い考察が得られるような特定の質問に焦点をあてたものです。アイトラッキング・ソフトウェアと25人の親切な参加者の協力により、次のような質問に対する洞察を得るために実験を行うこと
デザインには直感とデータどちらを採用すべきか？ デザイン会社 ビートラックス: ブログ
求められる結果に対して最良のプロセスを導きだすのがデザイン、及びデザイナーの仕事。では、数字として結果に繋がらないデザインに価値は無いのであろうか? どんなに見た目が良いデザインでも売り上げに繋がらなければ優れたデザインとは見なされないのか? 逆にどんなに美しく無くても、クリック数やコンバージョンの高いページや広告は素晴らしいのであろうか？ このような議論はデザイナーの間では普遍的にかわされている。 場合によっては「見た目のクオリティーを犠牲にしても良いのでとりあえず問い合わせ数のアップするページをデザインして下さい」等の依頼がクライアントから来るケースも少なくは無い。 クライアントの目的を果たしたいと思うと同時に、素晴らしいデザインを世の中に生み出したいと感じているデザイナーの立場からすると常につきまとうジレンマである。 そもそも優れたデザインを施す必要性がどこにあるかを考えた時に、端的
いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
【翻訳】ビジュアルデザインはつまらなくなってしまったのか？ - MOL
Original：HAS VISUAL DESIGN FALLEN FLAT? （2015-01-20）by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン（未完成であるけれど便利な表現）はスキューモーフィズム（同前）を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来
クリティカル・パスのCSSなるシロモノ
クリティカル・パスのCSSをインライン化して、描画の開始を早めるテクニックが広まり始めている。数字上は確かに効果的だが、ソーシャル・ボタンの非同期化によるスクロールのつっかかりと似たような問題を孕んでいるのではないかという思いが強い。 世の中にはスクロールをまったくしない人とすぐにする人がいる。しない人はまったくしないので、クリティカル・パスのCSSのインライン化は意味があるような無いようなところだ。効果的になるはずのスクロールする人は、ページが表示され次第とりあえずスクロールするという行動を取ることが多いように思う。その時、非同期で読み込まれたCSSが間に合っていないとかなりひどいことになるだろう。 こういったページ閲覧中のちょっとしたパフォーマンスの低下を避けるためにも、CSSは一気に読ませた方が良いと考えている。非同期化されたJavaScriptによりコンテンツの追加や削除が頻繁に行
擬似要素を利用したベースライン・グリッド
Fig 1: 擬似要素を利用してテキストをベースライン・グリッドに揃える CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利用すると、かんたんにベースライン・グリッドに合わせることができます (Fig 1)。 /* Vertical rhythm unit: 0.5rem */ p { line-height: 1.5rem; margin: 0.5rem 0; } p::before, p::after { content: ""; displa
デザインが機械化されても心配しない理由
それって本当にオリジナル？ レスポンシブ？フラット？ビデオをつかった背景？CSSアニメーション？ゴーストボタン？いろいろな『トレンド』を見て勉強している間に、すべて導入されている 14ドルのテンプレートをすぐに手に入れることができます。 CMS を活用して情報が更新しやすいレストランサイトを構築したい？専用の WordPress テーマを使えばすぐに完成します。英語だからダメと思うかもしれませんが、UI のローカライズが簡単できるように工夫されているので、使うことを諦めることはありません。 制作者の視点で語られる『オリジナルのデザイン』には、ひとつの矛盾があると思います。最新のデザイン動向を追いかけ、それを実践することが良いデザインに繋がると考えることがありますが、トレンドになる表現はすぐにコモディティ化されていきます。オリジナルを求めているつもりが、誰でも使えるものをゼロから手作りにして
感嘆符・疑問符の後に全角空白（スペース）が必要になる理由と、Webメディアの表記ルールについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。 さて、これからみなさんに、下記のそれぞれの文章を見比べていただきたいのですが、 A. ヒャッハー！汚物は消毒だ〜 B. ヒャッハー！ 汚物は消毒だ〜 A. 何してますか？忙しいですか？手伝ってもらってもいいですか？ B. 何してますか？ 忙しいですか？ 手伝ってもらってもいいですか？ どちらがしっくりくる、あるいは、どちらに違和感がある、と思ったでしょうか。 A.とB.の文章の違いは、文末の「感嘆符（！）」「疑問符（？）」の後に全角空白（スペース）があるかないかです。 ほとんどの人はあまり注意して見てはいないと思うのですが、じつはこの表記ルールはメディアによってさまざまです。絶対に全角スペースを空けているメディアもあれば、そうでないメディアもあります。 では、一体どちらが正式なのでしょうか。そもそも、明確な基準はあるのでし
Google Fontsはいつまであるのか？
Will Google Fonts Ever Be Shut Down?という記事を読んだ。とてつもない数のウェブサイトで利用されているGoogle Fontsが果たしていつまで無料で自由に使えるままなのかを、今のGoogle Fontsの状態とその持つ意味から考察されてる。現状ではメリットがあるので提供しているけれども、それがコストに見合わなくなったらすぐやめるんじゃないかみたいな悲観的な観測で終わる。 Google Fontsからビジネス・モデルのようなものがよく見えてこないことと一部の限られたユーザーにのみ高く評価されていることが、ジャンルがまったく違うがGoogle Readerと重なるところがあるのは少しわかる。それを考えるとサービスの停止もありそうと考えてしまうのもわからないこともない。でも悲観的になるのはちょっとわからない。 それほどコストはかかっていないと思うし、とんでもな
アイコンのユーザビリティ
ユーザーのアイコンに対する理解のベースになっているのは過去の経験だ。しかし、ほとんどのアイコンは使い方が定まっていないため、その意味を伝え、あいまいさを減らすにはテキストラベルが必要である。 Icon Usability by Aurora Bedford on July 27, 2014 日本語版2014年10月27日公開 色やスタイルを通してブランドのパーソナリティを伝える以外にも、グラフィカルユーザーインタフェースにおいて、アイコンで何よりも優先されるべきことは、意味を伝えることである。定義によると、アイコンとは、物体や動作、概念を視覚的に表したもののことである。そうした物体や動作、あるいは概念をユーザーがすぐに理解できなければ、そのアイコンは単なる見かけ倒し、つまり、まぎらわしく、いらだたしい、見ためは悪くないが意味のないもの、そして、タスクの達成を妨げる視覚的ノイズになってしまう
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
デザインが分からない人とデザイン話をするコツ
良いって何ですか？ デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い＝売れる」と解釈する人もいれば「良い＝使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
Webデザイナーの私がブログを書き続ける理由 | Webクリエイターボックス
2014年8月20日 Web関連記事 先月、『海外でWebクリエイターとして働くには？』対談セミナーが無事終了しました。私自身初のセミナーだったので、かなり緊張したのですが…多くの方に来ていただき、感謝感謝です。セミナーでは海外でのWeb関連のお仕事事情や留学情報がメインテーマだったのですが、ブログ運営についても少しお話しました。残念ながら時間の都合上すべてを語りつくせなかったので、補足も兼ねてブログをすることのメリットを記事にしようと思います。 ↑私が10年以上利用している会計ソフト！ ブログを始めたきっかけ 2009年、夏。バンクーバーのとあるカフェで、同じく駆け出しであった日本人Webデザイナーの友人にWordPressのオリジナルテーマの作り方を教えていました。彼曰くWordPressに関する記事は当時英語で書かれたものばかりで、日本語で詳しく書かれたサイトがあまりなかったようです
GoogleのUI Color Palette を色覚障がいの視点から見てみた｜くろひつじのメモ帳
Google I/O 2014で発表された Google Design のガイドライン。 UI Color Palette も提案されていていいなーと思って見ていたら、ブコメで「（トップのメニューが）ピンクと青緑の縦並びは、色弱の人には判別困難かも。」とあって、ちょっとその視点で見てみよう、と試してみました。 色覚障がいとカラーユニバーサルデザインについて 「色覚障害」「色覚異常」「色盲」「色弱」など色んな言われ方がありますが、一般的な人と色の見え方が異なる障がいです。 赤色が黒っぽく見えたり、緑が黄色っぽく見えたり。 この障がいにも種類があって、３タイプあり、赤が分かりづらいP型、緑が分かりづらいD型、青が分かりづらいT型があります。 色覚障がいでもっとも割合が多いのがD型だそうです。 こういった色覚障がいの人達でも判別がしやすい色を使いましょう、というガイドラインが、カラーユニバーサル
女性誌にみる女性向けデザインを研究したまとめ
どうも、シンプルやかっこいいWebデザインよりも甘いガーリーテイストのWebデザインが好きなガリザワです。 女性向けのデザインをする時に、女性ファッション誌を参考にすることがあります。しかし一概に女性ファッション誌と言っても数多くありその発行されている雑誌の種類は100種類もあります。そんな中で、主な女性ファッション誌の傾向とデザインの分析をまとめてみました。 女性ファッション誌エディトリアルデザインに学ぶ 女性ファッション誌には、WEBデザインには無い女性デザインの雰囲気を感じれる、WEBサイトではあまり見かけないようなデザインパーツなんかも数多くあるので、デザインをするときに参考にしている。 特に女性向けのデザインをするときに、ターゲット層が細かく分けられており、そのターゲット層にあったデザインをする必要がある。その上でターゲット層に合った雑誌の傾向をまとめてみた。 （伊藤忠ファッショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://azarashic.net/font-size-woman/
