過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ

業界特性だからと諦めてしまうことなかれ。これは「ひとえにマーケティング不足」だと枌谷氏は言う。 企業相手の仕事なら、企業ならではの作法に従うべきというのが、BtoBマーケティングの根底にある考え方。それによって、上に挙げたような問題は起こりにくくなり、場合によっては解消するという。 BtoBマーケティング自体は非常に濃密なテーマだが、25分の限られたセッションということで、すぐに理解できるであろう以下の7点に話をしぼって、枌谷氏はポイントを紹介した。 BtoBとBtoCの違いを知ろう購買プロセスを把握しようBANT条件を決めよう言葉を磨こう課題買い掛けのストーリーを作ろう自社サイトをうまく活かそう情報発信を積極的に行おう1. BtoBとBtoCの違いを知ろう「BtoBといっても相手は人だから、人の気持ちを動かすという意味では同じだろう、というのは乱暴な意見」だと枌谷氏は言う。先に挙げた7つ

幼い頃からどうしても本を読むのが苦手だった。最近になってようやく、それは脳の個性のせいだったんじゃないかと思うようになった。（このエントリーの内容は個人的な主観で書かれており、医学的な情報は一切ないことを最初に断っておく） 先日このツイートを見た。 ディスレクシアの息子は、長時間明朝体を読み続けると、酷い頭痛と嘔吐を繰り返します。定期テストで学年全体でUDフォントかゴシックにしていただけるか、学校に配慮をお願いした際「明朝体が一般的なので明朝体で作っています。」と聞いて、UDフォントのことが世間一般に知られていないと知りました。 — ずずり🍖 (@zuzuriko) June 10, 2019 ディスレクシアという学習障害がどのように生活に支障をきたすのか。ディスレクシアでもいろいろあるので具体的な情報は貴重だ。ディスレクシアも学習障害もUDフォントも、本当にたくさんの人に知られてほしい

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった

UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？　きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる

アール・アイ・エーについてAbout RIA 私たちは、1953年の創業以来、フラットな協働精神のもと、 全国各地の都市・建築において、快適で個性豊かな空間を 創出することで社会に貢献してまいりました。 都市・地域開発の企画構想段階から建物竣工にいたるまで、 都市開発コンサルティングと建築設計・デザインとを 融合したサービスにより、トータルで業務を展開している 特色ある組織設計事務所です。社会環境が大きく変化する今、 私たちの技術を提供することで、地域の課題を解決し、 新たな交流やイノベーションを実現すべく、地域の人々と共に 創っていきたいと考えています。 【着工】富山市中央通りＤ北地区第一種市街地再開発事業施設建築物 弊社が建築設計・事業コンサル（JV）として携わっている富山市中央通りD北地区第一種市街地再開発事業の施設建築物新築工事が着工しました。 計画地は富山市の中心商店街を形成する

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

Stephen Moyersはオンラインのマーケティング担当およびデザイナー、テクノロジーに詳しい熱心なブロガーです。彼はロサンゼルスに基点を置くSPINX Digital Agencyと契約しています。 音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。 Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。 ネガティブスペース ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要

友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。

WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ

Outbrainという会社の「WEBコンテンツの見出し（タイトル）」について、15万記事を調査したデータが、おもしろかったので簡単にメモ。 １）8ワードのタイトルがクリック率が最高に。 記事タイトルの長さとしては、8ワード（英語で）のものが一番クリック率が高かった。平均よりも21％高かった。 ２）サムネイル画像を入れるとクリック率＋27％ ほとんどのメディアはやっている気がするが、サムネイル画像を記事タイトルに加えると、クリック率を27％も高めることができる。 たぶん、ソーシャルのOGP画像とかもそうだし、あとはスマートニュースとかにも、多かれ少なかれ、当てはまる話だと思われる。 ３）偶数よりも奇数のほうが20％も吸引力がある 偶数よりも奇数のほうがクリック率が20％も高まる。たとえば「デザイン上達8のコツ」よりも「デザイン上達7のコツ」にすべきだと。 感覚的には「3・5・7」あたりの数値

制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション

Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果 （業務時間やコードの書き方、Web技術について） ウェブ制作者の就業時間やコーディングスタイルなど、皆さんは気になったことはありませんか？　同業者と交流の少ない職場だと、常識だと思っていることが業界多数の傾向と異なっているかもしれません。 そこで、Twitterアカウントから実施していたWeb業界に関するアンケートをまとめました。この記事では「Web業界の働く時間」「トレンドの技術」「コーディングスタイル」「フォント」の4つのアンケート結果を紹介します。 Web業界は何時まで働くのか？ 当サイトICS MEDIAのアクセスは18時を超えると急激に下がります。このことから、Web業界で働く大半の方々は18時に仕事を上がっているのではないかと考えるようになりました。このことをツイートしたら意外性があったらしく多くの注目を集めま

無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。

課題 ・サイトが多様且つ大量の内容を含んでいて、複数のページでは誘導が難しい ・サイト上のコンテンツをスムーズに、そして連続して展開したい 解決策 Webサイトに含む情報を一か所に集めたいなら、長距離スクロールサイトをシングルページで作りましょう。ソーシャルメディアのサイトや、その他ユーザーの制作物を含むサイトには絶大な効果を発揮します。これらは内容を一度にまとめて閲覧することが楽しみの一つであり、また常に内容の更新が行われるために、情報の分類が難しいからです。 画面が小さいためにスクロール量が多くなるモバイル環境の普及も、長距離スクロールにとっては追い風です。 後述する無限スクロールを長距離スクロールと組み合わせれば、Webサイトの閲覧に没入感を生み出します。ユーザーが特定の情報を探している場合は、Amazonのような体系的な仕組みに軍配が上がりますが、情報を次々に閲覧するなら、長距離ス

2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド　工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ

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

Illustratorをウェブ制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます（ツッコミ歓迎ですので、何かあればお気軽に）。 ドキュメントプロファイルは「Web」。［プレビューモード］を「ピクセル」に変更、［新規オブジェクトをピクセルグリッドに整合］はオフ ［線の位置］を「内側」にして作業 ［アピアランス］パネルメニューの［新規アートに基本アピアランスを適用］のチェックをはずしておく ［新規オブジェクトをピクセルグリッドに整合］はオフに ［プレビュー境界を使用］にチェックを入れる キー入力を「1ピクセル」に アートボードの座標に注意 sRGBを基準に これによって、次のような問題を回避できます。 プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。 ［新規

1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ