MIKIYA TAKIMOTO PHOTOGRAPH OFFICE - 瀧本幹也
Official website for MIKIYA TAKIMOTO PHOTOGRAPH OFFICE.
Sketchは文字の扱いが苦手？！
最近はPhotoshopと並行してSketchでもデザインしています。Sketchは爆速でデザインできると共にコーディングも手早く行うことができるので、短納期案件にも対応することができるすげーヤツです。 Sketchのイケていないところ そんなスゲーSketchですが、デザインをしていてAdobe系アプリと比べて不便を感じるところがあります。それは文字の扱いです。 Sketchのベースラインシフトはsupとsubが基本 Sketchでベースラインシフトができないんです。厳密にはできるっちゃできるんですが、スタイルをリセットしていないsupタグとsubタグの範囲しかできません。 当サイトのロゴはベースラインシフトで文字を少し躍らせるようなあしらいにしています。もし、Sketchでこのあしらいをしようと思えば文字を分割してあげる必要があります。 リアルタイムのカーニングが苦手 段落のカーニング
Arrange icons in phyllotaxis pattern with IconFlower Sketch App plugin
This weekend I made this little plugin. It arrange tons of icons in formations like the petal arrangement pattern in a sunflower. I love sunflowers 🌻 They call such patterns phyllotaxis pattern. Phyllotaxis describes spiral like patterns — it occurs repeatedly throughout nature. Arrangement of petals in sunflowers for instance. You can read more about Phyllotaxis in case you find it interesting.
モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説
モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」の声が聞こえてきます。 行き過ぎだと思いますか？ 実際のところ、2015年には上位サイトへのすべてのトラフィックが、モバイルで56％を占めていました（2015年 トラフィック レポート）。この割合は上昇し、2016年のデータはまだありませんが、専門家はモバイルのトラフィックが全体の60％を大幅に上回っていると考えています（モバイルのトラフィックは増加し続ける唯一のデバイスです）。 デスクトップユー
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
デザイナー視点でUI設計の質を上げるための4つのポイント | SONICMOOV LAB
こんにちは、ソリューション事業部でデザイナーをしております、こーたと申します。 ゲームを楽しむために、快適で使いやすく、ユーザーにストレスを感じさせないUIデザインが大切であるということを、前回の【UIデザインで幸せになるためにUXで意識している事】で掲載しました。 ではユーザーが幸せになる良いUIデザインをするためには、具体的にどうすればいいのかということですが、それらに基づいた骨組みをしっかりと作ってあげる必要があります。 今回はそんな幸せになるためのUI設計の作り方をご紹介します。 1：共有と理解 まずは設計する前に作るものへの理解を深めましょう！ UIの設計は、ゲームを企画をした人と密に連携をとって、きちんと内容を理解する事が非常に大切です。 たとえば・・・ どんなゲームなのか 何をするゲームなのか どんな世界観であるのか このゲームのウリ、特徴はなにか このゲームのターゲット層は
時代の変化でこれから生まれる8のデザイナー職 デザイン会社 ビートラックス: ブログ
”デザイナー”という仕事は時代やテクノロジーの進化によりどんどんその内容が変化する。一昔前はWebデザイナー、そのもう少し前はグラフィックデザイナーと呼ばれていた人達もいまではUIデザイナーやUXデザイナーを名乗っている。 また、クリエイティブテクノロジストなど最近だと数年前には存在していなかった肩書きのデザイナー関連職も出て来ている。 理由は単純で、Webデザイナーやグラフィックデザイナーの仕事がどんどん減って来ているから。言い換えると、世の中のニーズが変化するにつれ、デザイナーに必要とされるスキルと役割が変わってくる。ビジネスやユーザーの問題を解決するのがデザイナーの最大の役割なのであれば、その仕事内容が求められる フリーランスWebデザイナーという職業も無くなる4つの理由 いままでは1mmにこだわるのがデザイナーの仕事だったかもしれないが、これからビジネスにデザインを活用出来る人材が
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ
ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。 今回は操作性にこだわった、最新のナビメニュー用HTML/CSSスニペットをまとめてご紹介します。これらのコードを利用して、よりユーザーの注目を集める、独自のナビゲーションを実装してみましょう。 詳細は以下から。 未来のナビメニューはこれだ！参考にしたいHTML/CSSスニペットまとめ Spinny Header Menu 各種コンテンツをクリックすると、ヘッダー部分のロゴが回転します。 See the Pen Spinny Header Menu by Josh Nichols (@MrBlank) on CodePen. Fly Out Navigation 左サイ
Googleアナリティクス活用：ページ内A/Bテストをする方法
こんにちは。Googleアナリティクスラブのカグア！です。 Googleアナリティクスのウェブテストって、URL単位じゃないとできないから使いづらいなあ、と思っている方はいませんか？ なんと公式ページに、ページ内のボタンやテキストなど、オブジェクト単位でA/Bテストする方法が書いてありましたので、ご紹介します。 実際試しましたけど、実装もすごい簡単でしたよ。 追記：2017年2月8日 GTM実装しているのならば、Googleオプティマイズとの組み合わせが、もはや最強かもしれません。 ＞＞Googleオプティマイズを使えたのでざっくり解説！時代はGGOP 関連記事 ＞＞A／Bテストの失敗事例、テストすること自体が有効という思い込み GoogleアナリティクスのA/Bテストとは 正式にはウェブテストという名称です。Googleアナリティクスのレポート内の行動＞ウェブテスト にあります。 ランデ
サイズ感とバランスが大事！ レスポンシブにおける分量とフォントサイズ
行間と可読性 これまで、私たちはレスポンシブデザインにおけるフォントサイズと分量の関係について注目してきました。しかし、行間もまたユーザーの閲覧に影響を与えます。 行間は水平方向の動作に影響する ユーザーは水平にも垂直にもコンテンツを閲覧するため、テキストの行は、織物のように縦横無尽ではなく、水平に見ることをを促すべきです。 行間が詰まりすぎると、ユーザーの目の水平方向の動きを衰えさせ、テキストの左端の流し読みを促してしまう恐れがあります。また、ユーザーに同じ行を繰り返し読むことを強要する可能性もあります。一方、行間が緩すぎると、テキストの行が視覚的に「浮遊している」ように見えてしまいます。行は一つのまとまりの単位ではなくなり、垂直方向による流し読みがより難しくなってしまいます。 完璧な行間は存在しませんが、大体フォントサイズの150％が最適な場合が多いです。
ローディングGIF画像と便利な作成ツール16選
Webサービスを利用するユーザーに対して、読み込み中と分かりやすく伝えるローディングGIF画像は重要な存在です。コンテンツが読み込み中であることを伝えなければ、なんらかの不具合であると勘違い、あるいは気付かずに離脱してしまう可能性があるからです。 今回は、そのまま使えるローディングGIF画像、簡単に画像生成ができる便利ツールをまとめてご紹介します。今すぐ画像を使いたい方はもちろん、自作で画像を用意して使ってみたいと思っている方もぜひ参考にしてください。 ※素材数などの情報は2016年4月8日時点のものです。今後変更となる可能性がありますのでご了承ください。 フリーのローディングGIF画像 1.フリーデザイン素材「 ローディングのくるくるアニメーションGIFがいっぱい -｜PIXEL LAB http://www.pixelimage.jp/blog/2012/04/loading_icon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tha snatch
Picnic for Sketch
Styling Wizard: Google Maps APIs
feb19
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
UI Interactions of the week #43
坪田 朋
Flinto - The App Design App
