Web制作の作業効率を格段にアップさせる便利なチートシートまとめ
HTML や CSS のタグやプロパティをすべて記憶することはベテランのデザイナーでも難しいものです。しかし、わからないタグやプロパティなどをいちいち検索して調べていると開発に時間がかかってしまいます。そんなときに役立つのがチートシートです。 チートシートを使えば素早く目的のものを見つけ、より効率的な開発を行うことができます。今回は Web 制作を行うときによく使う HTML、CSS、Bootstrap、WordPress、ツールに関するものを紹介します。 HTML HTML5 Cheat Sheet ダウンロードページ HTML5 のタグがまとめられているチートシートです。すべてのタグが簡潔にまとめられており、非常に見やすいです。 The HTML 5 Mega Cheat Sheet ダウンロードページ こちらも HTML5 のタグをまとめたチートシートです。ブラウザ対応、廃止されたタ
ゲーミフィケーションにおけるプレイヤーペルソナの作り方
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 どのようなゲーミフィケーションのプロジェクトでも、システムに必要なことを決定するために、プレイヤーを調査する必要があります。この調査でもっとも優れたものが、プレイヤーペルソナの開発です。ほとんどのUXリサーチ経験者が親しんでいるだろうユーザーペルソナに似ていますが、プレイヤーペルソナでは、標準的なユーザーペルソナには存在しない、ゲーミフィケーション特有の要素もいくつか検証します。では、それらの要素を見ていきましょう。 プレイヤーを知るための最終ステップ ゲーミフィケーションには、プレイヤーへの深い理解が必要です。調査を通じて複数の異なる分野において理解を深め、プレイヤーについて十分に理解したら、上記の図を参照しながら、プレイヤーのペルソナシートを作成しましょ
ゲーミフィケーションのための４つのプレイヤータイプ
この記事はInteraction Design Foundationからの翻訳転載です。配信元または著者の許可を得て配信しています。 Bartle’s Player Types for Gamification ゲーミフィケーションはゲームデザインと同じものではありません。ゲーミフィケーションは、非ゲーム領域にゲーム要素を持ち込んだものだからです。しかし、ゲームデザインとゲーミフィケーションには重なる部分がいくつかあります。その１つが、プレイヤータイプです。プレイヤーをよりよく理解するほど、彼らのニーズに合わせることができるようになります。 プレイヤーの心理学 ビジネスでゲーミフィケーションを活用する場合、どのようなゲームプレイをプレイヤーが好むか理解するのが良いでしょう。Richard Bartle氏によってデザインされた、Bartleの心理学テストというシンプルな方法があります。これは
ゲーミフィケーションに向けた３つのステップ | UX MILK
TaylorはCodalのライターで、UXデザインから幅広いワールドワイドウェブの他の要素まで何についてでもブログ記事にしています。関連性の高い、魅力のある記事を作り上げる努力をしています。 心理学の報酬系では、ゲームをプレイしご褒美がもらえたとき我々の脳はドーパミンを出すとされています。ゲームをプレイすることを好きになるのは当然です。なぜなら、脳がそれを好むからです。 そのため、我々は自然とゲームに惹かれるようにできています。同様のことはUXの世界でも言えます。たとえば「ゲーミフィケーション」は、ユーザーの参加を促しエンゲージメントを改善するための手法として人気があります。 ゲーミフィケーションは、ゲーム的な仕組みや目標設定をデジタルな体験に取り入れる手法であり、ゲームとは異なるものです。 さまざまな分野において、アプリとWebサイトはユーザーの興味を引くために「ゲーミフィケーション」を
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
デザインシステムの定義と作成方法、導入事例
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、コードを提供しているからです。 デザインシステムは一過性のトレンドを超えて、2018年以降も続くベストプラクティスになりつつあり、将来的にはWeb全体でデザインの一貫性が向上すると期待できるでしょう。 これが何を意味をするかと言うと、すべてのWebサイトが同じ見た目になるということではなく、それぞれのWebサイトにおいて一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるようになる
コンテンツファーストでプロトタイプを構築する
Benは、UXPinのコンテンツデザイナーです。Webデザインとバックエンドの開発の仕事をしています。 ユーザーのためにデザインするには、ユーザーの最終目標とそこに辿り着くまでの行動を知っておかなければなりません。この２つはそれぞれコンテンツとユーザーフローと呼ばれます。これらが一緒になって、素晴らしいWebサイトの核を作るのです。 では、情報の概要をインタラクティブデザインに昇華させるにはどうすればいいのでしょうか？ この記事では、一連のコンテンツを１つのプロトタイプにする手法について、紹介したいと思います。 コンテンツリストをまとめる 私たちは何をデザインしているのでしょうか？ 多くのデザイナーは、まず外枠を作成してから内側へと仕事を進めていきます。ユーザーが多くの時間を費やす情報自体を検証する前に、情報の入れ物や枠組みから制作してしまうのです。 内から外へデザインを進める人は、ユーザ
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
アプリのプロトタイピングを爆速かつ効果的に行うための５つのヒント
Ning T.はコンテンツエディター、人類学者、デザイナー、技術とUXオタク。ブルースとWes Andersonの映画が好きです。 近年、モバイルアプリの作成プロセスは大幅に進歩しました。以前は、アプリ開発は着想、デザイン、開発、ユーザーテストという一連のサイクルを経て行われました。 今日ではユーザーテストが占める割合が大きくなり、デザイナーも開発者も着想の段階で既にアイデアの有効化が必要になっています。 アプリのアイデアとデザインを有効化するのに最も実用的なやり方は、プロトタイプすることです。正しく行えば、プロトタイプは時間とお金の両方を節約してくれます。ですから、ラピッドアプリプロトタイピング、つまりアプリのプロトタイピングプロセスをいかに速く回せるかが、現在のアプリデザインおよび開発においてのキーとなります。 これからラピッドプロトタイピングとは何か、そして何故ラピッドプロトタイピン
これだけは押さえておきたいアプリのUXを改善する10の方法
アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 ユーザーにストレスなくより良いユーザー体験を提供するためには、細部のUIデザインにも気をつけなければいけません。 今回はこれだけは押さえておきたいUIデザインを紹介します。 1. エラー時は問題の解決方法も載せる たとえば、ネットワークエラー時などには「ネットワークに接続できませんでした」と表示するだけでなく、「ネットワークに接続できませんでした。Wi-fiの設定を確認のうえ、もう一度お試しください」というようにエラーの解決につながる方法を明示した方がより親切です。 2. 画面をスワイプで戻れるようにする iPhone6, iPhone6 Plusがリリースされ、最近では大画面のデバイスが増えてきました。片手操作の場合、画面上部にあるボタンに届かないと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのUIデザインの参考になるスライド10選
Gitを一度はあきらめた人のためのわかりやすいスライド９選