こちらの内容は2018年iOSDCで登壇して発表した内容を更に詳しく書いたものです。 当日のこの発表のまとめはこちら↓ 概要 ふだん当たり前のように使っている iPhone や iPad、どうしてこんなに気持ちのいい使い心地になるのでしょうかコントロールセンターのアイコンたちのアニメーションや UI のパーツに着目し、AfterEffects でアニメーショントレースを行い、得た知見を共有します。 はじめにApple 製品は触り心地がいいので、ずっと触っていられますよね。Human Interface Guidelines や WWDC2018 Designing Fluid Interfaces の発表内容をもとに、Apple が何を目指してこのように設計したのか考察した内容をまとめました。iPhone を片手に一緒に手を動かしながら魅惑のアニメーションの世界を体験してみてください。 1

Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです css body { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: pol

目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし

メニューバーと向き合ったときに macOS のメニューバーを操作しているときにふと気づいたことがありました。プルダウンメニューが展開されている間は、他のユーザーインターフェイス要素が操作不可能になるのと同時に、どうやらその時間も停止しているのではないかということです。時間が停止すると何が良いのか、動いてしまうと何が都合が悪いのか。このことは、フォーカスに合わせて時間という属性がどのように感じられるのかについて考えるきっかけとなりました。 モーダルビューって時間を止めるよね — usagimaru ⌘ (@usagimaruma) 2018年4月30日 macOS の NSMenu を展開すると NSTimer が止まるようにできている仕様、メニューのモードに入る前の世界の時間が勝手に進まないようにあえてそうしているのだとしたら、とてもよくできてるなあ。 — usagimaru ⌘ (@us

googleのフリーのwebフォントと使うと、なぜかIEとEdgeだけきたない 原因は、フォントサイズが良いサイト、ガジガジになってしまうっぽい なぜかIEとEdgeだけ そんなきはスタイルシートにい transform: rotate(0.001deg); を追加してなおりました。 適応するのは、webフォントを適応している部分 ボクの場合は、タイトルタグにwebフォントを適応していたので h1,h2,h3,h4{ transform: rotate(0.001deg); } ってのを追加して直りました。

Webサイトのデザインの方向性決めというのは、検討が長引いたり、スケジュールの遅れに繋がったりする要注意ポイントの一つです。弊社も例外ではありませんが、一方で、デザインに至った過程を丁寧に解説することで、スムーズに進めることは可能であるとも感じています。ここでは、デザインコンセプトを自然に理解していただくために弊社が行っている提案方法を共有しようと思います。 以下のスライドは、実際に使われたスライドです。公開用に細部は少し変えましたが、内容はほとんどそのままです。 クライアントは、株式会社マネジメントサービスセンター（以下、MSC）という企業の人事戦略や人材育成の支援を行っているB2B企業です。ターゲットは人事部や経営層などで、前段として戦略、設計が完了し、ベースとなるデザイン案を初めて提案する際に使ったものです。こちらを元に、ステップごとに細かな解説をします。（スライド中に出てくる検討プ

webサイトのモックアップで意気揚々とユーザーテストした結果、白目を剥きました。テスト結果と考察、改善方法 初めまして。かけだしUIデザイナーのガラナです。プライベートでE2D3のwebサイトをデザイン中です。 【E2D3とは】Excelのデータから、インタラクティブなグラフを作成できる無料アドインソフト。有志が非営利に開発中。E2D3メンバーにより、講演会やもくもく会などのイベントも定期的に開催されている。 sketchとFlintoでwebサイトのモックアップを作成し、意気揚々とユーザーテストした結果、フルボッコになったお話。テスト結果と、考察、改良点をまとめました。 現状のサイトの構成と各要素の目標はこんな感じです。 「2. E2D3概要、3. プロダクトの一部お試し、4. プロダクト詳細」できちんとコミュニケーションが取れるかどうかが肝です。 今回は「E2D3とは何かがきちんと伝わ

はじめに SVG（Scalable Vector Graphics）というと、まず、「ベクター画像」という特徴を思い浮かべる人は多いでしょう。しかしSVGはただの画像ではなく、HTMLと同じくDOMを構成するのも特徴のひとつです。SVG（DOM）をJavaScriptで操ることで、インタラクティブなコンテンツを作ることができます。そのためのライブラリ「Snap.svg」について知識を深めましょう。 なお、このシリーズで紹介するサンプルは次のリポジトリにまとめてあります。併せて、参照してください。 GitHub - codegrid/2015-snapsvg SVGをJSで操作する SVGはHTMLと同じようにDOMを構成します。そしてそのDOMをJavaScriptで操作することができます。SVGを活用すれば、SVGならではのアニメーションが可能です。 このように、SVGは、斜めや曲線の表

JavaScriptはブラウザに組み込むだけで、複雑かつダイナミックな動きや機能を実装することができる非常に便利で汎用性のある言語です。 ただデメリットとしては、JavaScript単体でそのような表現をするには、複雑なコーディングを行う必要となることです。 その現実を目の前に諦めてしまう方も少なくないはずです。 しかし、そうした方にぜひお伝えしたい情報があります。 実は、JavaScriptの便利な機能をシンプルなコードで呼び出すことのできるライブラリを使うことで、先に述べたようなデメリットは一掃できます。非常に簡潔にダイナミックな動きを実装することが可能になります。 そこで今回は、JavaScriptライブラリの中でも、まるでFlashを使っているかのようになめらかな動きを実装することができる*「mo.js」*をご紹介します。 「mo.js」とは？ mo.jsは「Motion for

Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えておけば何かと重宝すると思います。 jQuery$(function($) { var num_cols = 3, //対象のリスト container = $('.split-list'), listItem = 'li', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), //リストのチェックと分割 items = $(this).find(listItem), min_items_per_col = Math.floor(items.length

TOP  >  WebService  >  サイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」 WEBサイトのクリエイティブのクオリティはデザインは然ることながら、どんな動きをさせるかというところでも、大きく影響がありますが、今日紹介するのはサイトの印象をぐっと引き上げてくれるクリエイティブな効果エフェクト「Block Reveal Effects」です。 「Block Reveal Effects」ではまず、はテキストや写真の出現エリアに色ベタのエリアが出現し、それがズレながら、本来描画されるオブジェクトに変わっていくというものです。 詳しくは以下 大きな動きと、何かが出てくる期待感は通常のlazyloadとはまた違ったクリエイティブ感を与えてくれます。様々なサンプルが公式サイトには準備されており、メニュー・モーダル・フォーム

Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website. Today we’d like to share some experimental hover effects with you. The idea is inspired by the hover effect seen on the grid of the Kikk 2015 website which was created by Dogstudio. We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 拡大縮小しても汚くならないベクター画像をサイト上に表示できるSVGを解説します。イラレを使った書き出し方法や、サイト上に表示する方法を超具体的に紹介します。 まえがき この記事を書いてるちょっと前に、このKOTORI Blogをリニューアルしました。 どうせリニューアルするならと、サイト内のイラストは基本全てSVGで書き出そうと思い立ち無事に実現できたので、SVGをブラウザに表示するためにKoToRiが実際に行った事をまとめて記事にしたいと思います。 それから、この記事ではSVGを作成するためにAdobeのIllustratorを使用します。 IllustratorのバージョンがいくつからSVGを書き出せるようになっ

Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'

作るだけだと失うバランス スキルが多ければ就職のチャンスが増えるでしょうし、デザインとコードの間を取り持つためのコミュニケーションの手間も省けます。新しい技術を取り入れたデザインが考えられることで、表現の幅も広がるはずです。柔軟性、拡張性のあるデザインを作るときにコード脳が役立ちますが、デザイナー自らがコードを書く必要性はないと考えています。 小さな組織、フリーランスであればコードを書かざるを得ない状況があるので、それは仕方ありません。『書けるべき』という強い表現が、どのような状況にも当てはまるように聞こえてしまうことに疑問を感じます。また、制作スキルばかりに力を入れても、デザイナーとしてのスキルの伸びに限界がある考えています。 デザインは人によって様々な定義が出てくるややこしい言葉ですが、私の中で「作る」ことと「考える」ことの 2 つに分けています。作ることは、何か目に見えるもの、触れる

We can't guarantee that every submission will appear on the site Booounce is a collection of inspiring short videos and GIFs. If you have a video or GIF that you'd like to share, just head over to the submit page to read the information for submission and submit. Please feel free to contact me if you have any further questions or concerns. Copyright © Jongmin Kim.

Googleアナリティクスで、ユーザごとに「どの順番でページを見て、コンバージョンしたか」などを確認できる「ユーザーエクスプローラ」という新しい機能が2016年4月にリリースされた。これは、これまでのGoogleアナリティクスでは確認できなかったデータだ。本稿では、この新機能の仕組みや見方から、B2C・B2Bサイト別の実際の活用方法までを徹底解説する。 ユーザーエクスプローラは3月下旬から確認され始めていたが、4月11日のリリースノートで正式にアナウンスがあった。 Analytics Release Notes for April 11, 2016（英語） https://support.google.com/analytics/answer/6392777ユニバーサルアナリティクスと従来のGoogleアナリティクスのどちらの環境でも、設定やカスタマイズなしにユーザーエクスプローラのレポー