Webデザインのトレンドは実際に使うかどうかは別にしても、それらを見るのは非常に楽しく、インスピレーションが刺激されます。 2016年上半期、最近見かけるようになったWebデザインの5つのトレンドを紹介します。 5 Actual Web Designs Trends for 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. ブラウザいっぱいに表示して、スクロール無し 2. 固定表示は見出しをサイドに 3. ロゴをローダーとして使う 4. 今までは違った背景の使い方 5. 圧倒させるアニメーション ボーナス 1. ブラウザいっぱいに表示して、スクロール無し スクロールを必要としないサイトが、ついに勢いを増してきました。 縦長ページで次々にコンテンツを無限スクロールで表示させたり、リンクが配置されたヘッダを上部に固定表示させ

こんにちは、ソリューション事業部でデザイナーをしております、こーたと申します。 ゲームを楽しむために、快適で使いやすく、ユーザーにストレスを感じさせないUIデザインが大切であるということを、前回の【UIデザインで幸せになるためにUXで意識している事】で掲載しました。 ではユーザーが幸せになる良いUIデザインをするためには、具体的にどうすればいいのかということですが、それらに基づいた骨組みをしっかりと作ってあげる必要があります。 今回はそんな幸せになるためのUI設計の作り方をご紹介します。 1：共有と理解 まずは設計する前に作るものへの理解を深めましょう！ UIの設計は、ゲームを企画をした人と密に連携をとって、きちんと内容を理解する事が非常に大切です。 たとえば・・・ どんなゲームなのか 何をするゲームなのか どんな世界観であるのか このゲームのウリ、特徴はなにか このゲームのターゲット層は

要素や画像の角などに配置するコーナーリボンを、画像は使用せずにCSSのみで実装してみたものです。 HTMLとCSSで実装する場合は幅や位置の指定が若干面倒に感じることはありますが、その分カラー変更等も容易で角度なども自由に変更できます。 イメージにあるように、作成するのは「左上」「右上」「左下」「右下」の4パターンのコーナーリボンとなります。 「左下」「右下」に表示しているものは意図的にテキストを逆さに表示させていますが、通常の見栄えで良いのであれば後述するコードのtransform: rotate();の値を変更してください。 ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 HTMLと共通CSS 紹介しているものは下記のようなHTMLを使用しており、共通のclassとして.ribbonを記述しています。 また、それに加えて例えば「左上」の場

さて、日本でもとうとう「ポケモンGO」がローンチされました。皆さんも恐らくご存知の通り、一足先にリリースされたアメリカではもはや社会現象になっています。ローンチからたった一週間ですでにモバイルゲーム歴代最高のユーザー数を獲得し（！）、アクティブユーザー数ではTwitterを追い越しました。僕が住む比較的郊外でさえ、道を歩けばポケモンGOをプレイしている人と何度もすれ違います。アメリカに住んで12年、こんなことは初めてです。とにかく話題で持ちきりのポケモンGO、このゲームを任天堂と共同で開発している会社がサンフランシスコにあるNiantic, Inc.です。 Niantic, Inc.は元々Googleの社内スタートアップとして始まり、これまでにIngressというモバイルゲームを開発してきました。Ingressのゲームコンセプトは陣取りゲーム。ゲームフィールドは私たちが住む現実の世界そのも

Liberato 自然素材をアップサイクルしたサステナブルなシューズブランド「Liberato(... 詳細を見る

UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導

アメリカ、サンディエゴにて、7月21日より開催されていたSan Diego Comic-Con International 2016。海外メディアより、本イベントに参加した『オーバーウォッチ（Overwatch）』コスプレイヤーたちの映像が公開されています。 GameSpotが公開中の映像では、コスプレイヤーたちが『オーバーウォッチ』に登場するキャラクターに扮し、思い思いのポーズをとっています。D.Vaだけで12人もいるほか、女性版ジャンクラット、大きな鎧を再現したラインハルトなどが登場。なかには、ハンゾーが"龍撃波"を放つ際のセリフ「リュウガワガテキヲクラウ！！」を叫ぶ気合いバッチリの男性や、夏仕様の軽快なソルジャー76を始め、様々なコスプレが確認できます。 《秋夏》

最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。 デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。 ※一部JavaScriptも必要最小限で使用しています。

優志：Niantic, Inc.に入る前には、もともとWebmasterというチームのグラフィックデザイナーとしてGoogleの日本支社で働き始めました。そのあとAPACのマネージャーを務め、そしてこちらの本社に移りました。また同時にGoogleのホリデーロゴのプロジェクトにもイラストレーターとして参加しました。当時アメリカ人以外では初めてDoodleを描いたんじゃないかな。そしてまだ当時は社内スタートアップだったNiantic, Inc.にUX/Visual Designerとして参加しました。今はアジア地域のディレクターとして働いています。 高：じゃあNiantic, Inc.でも当初はワイヤーフレームを組んだり、UIをデザインされていたんですね。 優志：そうそう。今はマネージメントが主な業務だけど、手を動かしてつくることもなるべく続けていきたいです。 UXのデザインを長年やってきてす

2016年 東京都知事選立候補者 後藤輝樹さんの政見放送です。

少々前の話になりますが、ポリゴン・ピクチュアズさまからお声掛けいただき、2014～2015年にかけてテレビ放送されたアニメ「シドニアの騎士」（原作: 弐瓶勉さん）のプライマリーデザインを弊社 三階ラボ で担当させていただきました。 プライマリーデザインの具体的な内容は以下の２つです。 モニターグラフィックメインビジュアルの開発 シドニアフォントの作成 ともに、原作の漫画にはすでにオリジナルのデザインが存在していますが、しっかりと時間をかけて目視できる静止画とは違い、アニメのような動画では、様々な要素が一瞬しか表示されないことが多くなります。 今回は、原作の素敵なテイストを維持しつつ、アニメ向けにデザインを再構築することが主な目標でした。 モニターグラフィックメインビジュアルの開発 原作の漫画から、モニター内に表示される主なグラフィックを抽出し、機能性や視認性、汎用性を高める再デザインを行い

私はコミットログの書き方に悩む英語の苦手な人間である。実際、似たような人は世の中に結構いるようで、頻出単語を集計したりまとめたものは既にあって役に立つのだけれど、これらはあくまで単語の話であり、具体的な文を構成する過程でやっぱり困る部分がかなりあった。 要するに、どういう時にどういう文が使われているのか、ということを示した例文集が欲しいのである。ググると他にも「例文集があればいいのに」みたいな声はあるくせして、しかし誰も作ろうとしない。何なんだお前ら。それじゃ私が楽できないじゃないか。 仕方なく自分でまとめたので、増田に垂れ流しておく。 はじめにここで挙げているコミットログは全て実際のコミットログからの転載である。当然ながら各コミットログの著作権はそれぞれの書き手にある。いずれも各英文でググれば出てくるし、フェアユースの範囲なら許してくれるだろうと考え名前とプロジェクト名は割愛したが、ここ