Codal社のクリエイティブ戦略家。Codal社はシカゴを拠点とするモバイル開発のソリューションを提供しています。 Webページで犯しがちな間違いの一つとして、登録フォームに項目を作成しすぎることが挙げられます。 今後の販促のためにユーザーの情報をたくさん手にいれようと、サイトやアプリのフォームは項目で溢れかえってしまいます。これはユーザーのフラストレーションや苛立ちを誘う原因の一つになります。 ユーザーから情報を求める前に、なぜそもそも登録する必要があるか述べることはとても重要です。１、２文で端的に自社サイトに登録するメリットをまとめることです。そしてこの文章を登録ページの目立つところ（理想は登録フォームの近く）に表示するべきです。 割引クーポンや無料のE-book、その他の登録しなければ利用できない独占コンテンツのアクセス件を受け取るといったメリットを用意するのもよいでしょう。もし登録

マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali

Adrianは現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。Twitter：@azumbrunnen_。 私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。 何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。 それでは、まいりましょう！ botなどの対話型トレンドに対する憂鬱 私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武

CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら

どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください！ ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何？という根本的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q＆A方式でスライドが進んでいくのでさらっと読めます。

ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「

日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記

Web業界は技術やトレンドがどんどん新しくなります。最新の情報をしっかりキャッチすることが仕事の質を左右するといっても過言ではありません。これからWebデザイナーとして働く新社会人のみなさんも、今のうちに情報収集する癖をつけておいたほうが良いでしょう。 そこで今回は、立派なWebデザイナーになるために新人デザイナーがチェックすべきWebデザイン系情報サイトをご紹介します。 いくつか気に入ったサイトが見つかれば、それを定期的にチェックするだけでもたくさん情報を集めることがでるので、ぜひ参考にしてみてください。 Webクリエイタ―ボックス Webデザインだけでなく、HTML、CSS、jQueryといったコーディングに関する情報も紹介しています。メニューの「初心者向け」を選択すれば、Webデザインの基本を学べる記事が豊富にそろっているので、これから働く新人Webデザイナーにおすすめです。 Cre

この春から六本木で働き始める駆け出しデザイナーです！ MAMORIOという落とし物追跡タグのUI/UXデザインをやっています。 先日、ついに「Adobe Experience Design CC (Preview)」（以下、Adobe XD）が公開されました。 以前からAdobe初の”UXデザイン”に特化したアプリケーションとして話題になっていた「Adobe XD」ですが、一体何ができるのでしょうか？　実際に使ってみながらご紹介します。 デザインとプロトタイピングの行き来ができる デザインソフト「Sketch」や、プロトタイピングツール「POP」「Prott」など、UXデザインをするためのツールはたくさんあります。「Adobe XD」の一番の特徴は、「Sketch」などが行っていた”デザイン”のプロセスと、それに遷移をつけて動くモックアップにする”プロトタイピング”のプロセスを、１つのアプ

1991年生まれ（24歳）・山口県出身。 学生時代は情報工学・電子工学を専攻し、現在はWEBエンジニア。 最近の興味は、IoT・人工知能・UX。 今日、勉強会等も盛んに行われている"UX"。筆者は社会人２年目のしがないWEBエンジニアですが、この波についていこうと、2016年３月９日に開催されたUX JAM 7に参加しました。LTやUXデザイナーの方との会話を通して多くの刺激を受けました。今回の記事は、その刺激をもとにしてエンジニア視点でUXや開発手法について考察したものです。 UI/UXからUXへ 皆さんも肌で感じているかも知れませんが、ここ最近でUI/UXという表記が減ってきているように思いませんか？　最近はWEB・アプリ界隈でもUXが独立で語られるようになっていると同時に、UXがUIの概念を包括して語られることが多くなっています。従来、「UIがもたらすユーザビリティ」という意味で語ら

アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 ユーザーにストレスなくより良いユーザー体験を提供するためには、細部のUIデザインにも気をつけなければいけません。 今回はこれだけは押さえておきたいUIデザインを紹介します。 1. エラー時は問題の解決方法も載せる たとえば、ネットワークエラー時などには「ネットワークに接続できませんでした」と表示するだけでなく、「ネットワークに接続できませんでした。Wi-fiの設定を確認のうえ、もう一度お試しください」というようにエラーの解決につながる方法を明示した方がより親切です。 2. 画面をスワイプで戻れるようにする iPhone6, iPhone6 Plusがリリースされ、最近では大画面のデバイスが増えてきました。片手操作の場合、画面上部にあるボタンに届かないと

今回はモバイルアプリのUIデザインをするときに参考になる素晴らしいスライドを紹介します。 モバイルアプリはWebデザインとはまた異なった視点が必要になってきます。モバイルアプリ特有のデザインフローや、プロトタイピング手法について学びたい方におすすめです！ アプリUI勉強会 in ネットイヤーグループ

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

デザインをするとき、「あの作品みたいなフォント」のようにイメージしたり、説明したりすることはないですか？ 今回は有名なアニメ作品の中でもフォントが特徴的なものを集めてみました。 マティス-EB アニメのフォントとして必ず引き合いに出される定番フォントがマティス-EBです。こちらは「新世紀エヴァンゲリオン」の題字で使用されていることで有名ですが、元のフォントを見ればわかるように、使用の際にはかなり横幅を圧縮しており、独特の緊張感を醸し出しています。 ラグランパンチUB こちらは見覚えのある方も多いのではないでしょうか。作中にもタイポグラフィを大胆に使ったことで話題になった「キルラキル」のフォントです。そのインパクトあるボールドさと、大胆な赤と文字づかいでラグランパンチはキルラキルフォントとして一躍有名フォントとなりました。 ゴシックMB101 モリサワフォントに収録されている、使い勝手のいい