Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
Webデザインに動きを加える５つの方法
アラン・スミス氏はライターで、ソーシャルメディア、ウェブデザイン、モバイル・アプリ、デジタル・マーケティング、起業家精神、ベンチャー企業などの様々な話題を最先端のデジタル世界で取り上げています。 1906年に最初のアニメーション動画が制作されたのは、ストーリーテリングにおける革新的な一歩でした。ストーリーテリングで用いられるアニメーション技術は、毎年格段に進歩しており、それは2018年も同様でしょう。Webデザイナーは古い技術ではなく、より高度な２Dや３Dのアニメーション画像を選ぶようになってきています。 2018年のアニメーション Webデベロッパーは、FlashをやめてCSSやJavaScriptでアニメーションを作成するようになりました。Flashをサイトにインストールすることは、技術的な理由から段階的に廃止されました。Flashが廃止された第１の理由は、iPhoneやiPad、iP
Webデザインにおけるスクローリングの新しいルール
かつてWebデザインでタブーとされていたものが、近年もっとも人気がある手法の１つとして完全復活しました。ユーザーはスクロールが必要なサイトを好み、評価するようになったのです。スクローリングは過去の汚名を捨て去り、主要なインタラクションデザインの要素として新たに生まれ変わろうとしています。つまり、デザイナーは新たなルールを学ぶ必要があるということです。 この記事では、スクローリングの復活について探ります。この手法の長所と短所を説明し、ちょっとしたヒントも紹介します。 スクローリングが再評価された理由 簡潔に言えば、答えはモバイルデバイスにあります。 モバイルユーザーの数がデスクトップユーザーの数を上回って以来、UIデザイナーの誰もがこの流れに適応してきました。小さな画面を利用するユーザーが多くなったことで、スクローリングの必要性が増しました。画面が小さくなるほど、スクロールは長くなります。
ECサイトで破ってはいけない８つのルール
ECサイトは他のジャンルのサイトに比べて独自の文脈や風習が多く、私たちはそれに慣れ親しんでいます。ユーザーは習慣の生き物ですので、ECサイトをデザインする際は、その慣れ親しんだ文脈を無視するわけにはいきません。 今回はECサイトにおいて「破ってはいけない」ルールをガイドラインとしてまとめました。 1. ナビゲーションのラベル あなたの扱う商材のブランディングは大事ですし、Webサイトにおいてもその一貫性を保つことは非常に重要です。しかしこれをやりすぎると、とりわけナビゲーション部分に関してはUXを損なうケースがあります。 例えばもし、カテゴリーページに曖昧な名前をつけたりしてしまうと、２つの弊害が生まれてしまいます。 １つ目は、ユーザーがあなたの意図していることを理解できないという弊害です。 HowiesのサイトではLITBという項目があります。これは何を意味するのでしょうか？ これは「L
ユーザーシナリオによってUXを完璧にする方法
Jerryは、ワイヤーフレームとプロトタイプ作成アプリであるUXPinのコンテンツストラテジストで、アプリ内とオンラインのコンテンツを開発しています。UXプロトタイピングの方法、ツール及びプロセスについて学びたい方は、無料のプロトタイピングガイドをダウンロードしてください。 ユーザーシナリオは、自社のペルソナが実行に移すストーリーのことです。基本的に、ユーザーシナリオは（視覚的に表現されますが）思考力を働かせることであり、自社のペルソナによって表現された特定のユーザータイプが、ある目的をある状況の下で達成するために、どのようにウェブサイトとやり取りするのかを予測します。 ユーザーシナリオは、未来のユーザーがサイト上でタスクを遂行しようとする際に、何を探し求めるかについて理解を深めさせてくれます。たとえ自社のペルソナがタスクに「失敗」したとしても、少なくとも問題点を明らかにしてその問題に立ち
魅力的なアプリアイコンをデザインするための９つのポイント
マテリアルデザイン マテリアルデザインは、広く知れ渡った哲学というより、ブランディングされたプロダクトに近い位置づけかもしれません。このデザインのアプローチはGoogleにより構築され、すべてのガイドラインはGoogleにより決められ、そしてコンセプトが変更されるときなどは、Googleにより承認されるのです。 フラットデザインとマテリアルデザインの違いはなんでしょう。この２つはとても似ていますし、そんな疑問が生じるのも不思議ではありません。実際、素人目ではこの２つの違いはほとんど見分けることができないでしょうし、その違いは細かいところにあります。 マテリアルデザインは、見た目的にはフラットで、色合いもそうなのですが、実は2Dではありません。マテリアルデザインで実現したいのは実世界とデジタルの融合で、オブジェクトに影がついていたり、スキュアモーフィックの面影が見られるのは、そのためです。（
InstagramやAirbnbなどのUIデザインに見る新しいトレンド
ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？ 聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti
Gitを実践的に使うために参考にすべき記事20選
チームで開発を行うときにGitのスキルは必要不可欠なものとなってきています。以前、Git初心者向けにスライドをまとめたものを紹介しましたが、今回はGit（GitHub）をさらに活用するために参考にしたい記事を紹介します。 この記事は以下のような方におすすめです！ ・ブランチをどのように運用すれば良いのかわからない。 ・コミットメッセージの書き方にいつも悩んでしまう。 ・issueやPull Requestをもっとうまく活用したい。 ・Git�やGitHubに関する便利なテクニックを知りたい。 ・間違ってコミットしてしまったけど対処法がわからない。 今回は、運用編、コミットメッセージ編、issue編、Pull Request編、テクニック編、問題解決編と５つの内容で分類してみました。実践的な読み応えのある記事ばかりなので、ぜひ参考にしてみてください。 運用編 中の人に聞いたGitHub fl
Webデザインのアイデアに困ったら覗きたいサイト10選
この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1. MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2. 現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3. I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト
ファイナルファンタジーVIIから学ぶチュートリアル設計
1997年の12月25日、私は最愛のメガドライブを卒業し、初代プレイステーションを手に入れました。それから数ヵ月の間、数えきれないほどの時間を史上最高のRPGであるファイナルファンタジーVII（以下FFVII）に費やしました。 それから約20年後にあたる去年、FFVIIはiPadでリリースされ、再度プレイしたときに全く新しい観点からこのゲームを再評価することとなりました。特にオンボーディング（サービスの初期導入プロセス）に関しては学ぶ点が多かったです。 FFVIIに詳しくない人向けに説明すると、このゲームは主人公クラウド・ストライフと反乱軍の仲間が、暴虐な巨大企業から星を守るために戦う一方で、力におぼれた宿敵、セフィロスを追い詰めていくストーリーです。 ノスタルジーに浸ったりながらiPad版におよそ44時間も没頭するうちに、私は10歳の頃と同じようにFFVIIを大好きになりました。しかし、
2016年トレンドの水彩風デザインを楽しめる無料イラスト素材10選
2016年になって、手書き風や水彩画風のデザインが多くなってきました。今回は、無料で様々な用途に使える水彩イラスト素材をご紹介します。 優しい雰囲気や温かみを与えてくれる水彩イラストをデザインに取り入れてみてはどうでしょうか？ Watercolor dots 水彩絵の具で描かれた16種類のドットが素敵なベクターセットです。どれも繊細な色合いで、カラフルながらも落ち着いたデザインに向いています。 Free Watercolor Flowers Clip Art For Subscribers 美しいお花のイラストセットです。サイト内でメールアドレスを入力し、サインアップすればpngファイルでダウンロードすることができます。 個人利用のみ可能です。 Watercolor hispter badges 水彩絵の具の上に様々な形のバッジを乗せたベクターセット。アウトドア系のデザインに合いそうですね
Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
国内外のデザイナーによる美しいポートフォリオサイト11選
この記事では、デザイナーやクリエイターの美しいUIのポートフォリオサイトを10サイト紹介します。ユニークで美しいポートフォリオサイトは、UIデザインに詰まった時や自分のポートフォリオサイトを作る時の参考になります。 １. Jason Benjaminさん モーション・ビジュアルデザイナーのJason Benjaminさんのポートフォリオサイトです。EvernoteのUIデザイナーもされていたとのことですが、サイトの方も直感的に過去の作品を閲覧することができます。 ２. Adrian Zumbrunnenさん GoogleのUX/UIデザイナーであるAdrian Zumbrunnenさんの個人サイトです。今流行りのチャットボットのような対話型UIで、一言ずつ表示される吹き出しはあたかも本人に話しかけられているようなデザインになっています。システム的に導入するには敷居が高そうなものの、対話型と
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
スーパーマリオのステージ1-1から学べるUX
上海で働くさすらいのゲームデザイナー/ディレクター。日本語、中国語、英語、名古屋弁のマルチリンガルということになっている。 ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの１－１に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たことがないものを作りたい！」と思うものですが、ユーザーにとってみればコンテンツを初めて利用するときの面倒くささがその斬新さに比例して大きくなっていきます。最初の「覚える」段階のUXが悪ければ、その先にどれだけステキな体験が待っていたとしても、そこに到達する前に多くのユーザーは離脱
ノンデザイナーも必見！デザインの基礎が学べるスライドまとめ
どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください！ ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何？という根本的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q＆A方式でスライドが進んでいくのでさらっと読めます。
Flashはなぜその役割を終えたのか
デザイナー/デベロッパー。Fotogramme for Instagram 作者。フリーランサー。ウェブやモバイルアプリのUXディレクション、デザイン、開発を手がけています。 @hiro_kimu emotionale.jp。 Flashという名称が無くなってしまうーー2015年11月末、Flash Professionalのアプリケーション名称を「Adobe Animate CC」に変更するという発表がAdobeからあり、20年に及んだFlashの歴史が転換期を迎えました。「Flashは死んだ」と評されてすでに久しいですが、存在よりも先に名称が消えてしまうことになるとは思わなかった方も多いでしょう。 W3Techsによる調査結果では、2015年12月現在、ウェブサイトでのFlashの採用率は9.6%にまで落ち込んでいます。2011年1月の同調査では28.5%だったことを鑑みると、ウェブに
５つのキュレーションサービスから学ぶ記事配信アルゴリズム
アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 みなさんは情報収集をする際にはどのようなものを利用していますか？ 最近では様々なキュレーションサービスがリリースされており、そのWebサイトやアプリを使用している方も多いのではないかと思います。 今回はキュレーションサービスの中でも記事配信アルゴリズムが興味深いものをまとめてみました。各々のキュレーションサービスの特徴的なアルゴリズムとともに紹介していきます。 キュレーションのアルゴリズム サービスの紹介の前にキュレーションサービスにある主な機能について紹介します。 - 記事収集機能 ユーザーに配信するための記事を収集する機能です。RSSやSNSなどから抽出したURLが情報源として利用されることが多いです。 - 記事評価機能 記事が正しいものであるか、
ゴシック体で汎用性の高い日本語フリーフォント10選【商用利用可】
日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記
環境構築は必要なし！すぐにプログラミングが始められるWebサービス10選
コードを試したい場合だったり、プログラミングの学習をしたりするときに、開発環境を整えるのが面倒なことはありませんか？今回は面倒なアカウント登録も不要で、ブラウザだけですぐにプログラミングができるWebサービスをご紹介します。 Runstant http://phi-jp.github.io/runstant/release/alpha/ 対応言語：HTML, CSS, JavaScript Web系のコードを試すときに便利なサービスです。エディタがSublime Text風のハイライトで見やすく動作もサクサクなので非常に使いやすいです。saveボタンを押すことでコードの情報が入ったURLが自動的に生成され、簡単に他の人にシェアすることができます。また、上のshareボタンを押した後にembed codeの内容を記事内に埋め込むとコードと開発環境自体も埋め込むことができます。Webデザイナー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
