タグ

デザインに関するseita05のブックマーク (55)

  • 良いアプリの7カ条①:目的が一言でいえる | ウェブ電通報

    多くの企業がDX領域に取り組む中で、顧客接点をスマホに求める動きが加速しています。特にアプリの重要度は年々増しており、1ユーザーあたりの月間平均利用アプリは41個、日間平均アプリ利用時間は4.8時間との調査結果があります(※1)。 連載では、アプリ開発で電通と協業しているフラー株式会社にインタビュー。初回は、iPhoneの黎明(れいめい)期からアプリを追いかけてきたフラーの山﨑社長に、「良いアプリの7カ条」について語ってもらいます。 (企画:電通 8MK局 笹川真、大坪要介、杉山裕貴) フラー株式会社 デジタル領域で企業の事業支援を行い、主力事業の一つはアプリのデザインと開発。アプリとその市場をきめ細かく分析し、戦略構築からプロダクト開発、グロースまでを一手に手掛ける。同社では、エンジニア、デザイナー、データサイエンティスト、ディレクターからなるクリエイティブチームがさまざまな企業の優れ

    良いアプリの7カ条①:目的が一言でいえる | ウェブ電通報
  • 宮澤テクノロジー@ご当地電力を巡る旅⚡️ on Twitter: "これ秘密にしておきたいくらいのライフハックなんですけど、URLを指定するだけでサイトマップを取得してきてくれる超有能Webアプリがあります。デザインの参考にしたり、要件定義したりするのにめちゃ役立ちます。WIREDをキャプチャして… https://t.co/OnfYM4k0zF"

    これ秘密にしておきたいくらいのライフハックなんですけど、URLを指定するだけでサイトマップを取得してきてくれる超有能Webアプリがあります。デザインの参考にしたり、要件定義したりするのにめちゃ役立ちます。WIREDをキャプチャして… https://t.co/OnfYM4k0zF

    宮澤テクノロジー@ご当地電力を巡る旅⚡️ on Twitter: "これ秘密にしておきたいくらいのライフハックなんですけど、URLを指定するだけでサイトマップを取得してきてくれる超有能Webアプリがあります。デザインの参考にしたり、要件定義したりするのにめちゃ役立ちます。WIREDをキャプチャして… https://t.co/OnfYM4k0zF"
  • レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages

    ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。 SaaS Pages SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。 ナビゲーションバー 目標到達のプロセスから遠ざかる方向にナビゲートしない。 分かりやすいCTAボタンがある。 ユーザーエクスペリエンスを向上させるスティッキーバー。 開発者向けのドキュメントなど、特別なリンクを含めたい場合。 Navbar ヒーローヘッダ 独自のセールスポイントを強調する。 「今

    レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages
  • Zeplinがかなり便利!Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス

    Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。 ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基的な使い方は同じです。 準備: Adobe XDとZeplinのインストール Adobe XDでデザインを開く Adobe XDからZeplinにファイルをインポート Zeplinでデザインの指示書・スタイルガイドを作成 準備: Adobe

    Zeplinがかなり便利!Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス
  • 商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View

    商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に

    商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
  • UI/UXとは?知っておきたいUI/UXデザイン50の知識

    今回は「UIUXとは?」から始まり「UI/UXデザインをする際のポイント」を50項目に分けて紹介します。

    UI/UXとは?知っておきたいUI/UXデザイン50の知識
  • 配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note

    今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー

    配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki IKEDA|note
  • Appleに影響を与えた伝説の工業デザイナー、ディーター・ラムスの「いいデザインの10か条」 - GIGAZINE

    iPhoneをデザインしたAppleのデザイナー、ジョナサン・アイブ氏にも影響を与えたといわれる伝説の工業デザイナーであるディーター・ラムス氏は「いいデザインの十か条」を提唱しています。ラムス氏と「いいデザインの10か条」を映画監督のゲーリー・ハストウィット氏が映像化した「Dieter Rams’ 10 Principles of Good Design」が無料公開中です。 Rams — Gary Hustwit https://www.hustwit.com/rams 「Dieter Rams’ 10 Principles of Good Design」は以下から見ることが可能です。 Dieter Rams’ 10 Principles of Good Design on Vimeo 「全てのものは相互作用し、同時に他から独立しています」というラムス氏の言葉と共にムービーはスタート。 「

    Appleに影響を与えた伝説の工業デザイナー、ディーター・ラムスの「いいデザインの10か条」 - GIGAZINE
  • デザインの力で人々の行動を変える – ビヘイビアデザインの裏側

    人を行動させるため企業は様々な努力をしている。広告をクリックしてもらう。記事をシェアしてもらう。商品を買ってもらう。デザインの力で人を行動させるのがビヘイビアデザインだ。 ページビューは順調に伸びているのにコンバージョンが思うように伸びない。広告費をかけた新商品が売れず、定番商品ばかり売れる。アプリのダウンロード数は増えているがアクティブユーザー数が増えない。ビジネスパーソンの頭を悩ませるこんな現象には、実は科学的な根拠があった。この記事ではそのメカニズムを解明していく。 ビジネスにおけるユーザーエクスペリエンス (UX) の重要性 人を行動に導く3つの要素とはそもそも、人はどうして行動するのか。そのメカニズムを知らないことには人を効果的に動かすことはできない。人の行動を因数分解し、デザインを使ってどのように人を行動に導くかを考える。人の行動は以下の3つの要因が作用することによって起こる。

    デザインの力で人々の行動を変える – ビヘイビアデザインの裏側
  • この絵描きに注目!2019

    2018年、主観で特にすごかった絵描きを独断と偏見でまとめました。 規約に基づきTwitterからの引用を行ってます。 最後に総評。敬称略。 オルタナティブ 丸紅茜 夜は二人を咎めない pic.twitter.com/rDilIwcCKk — 丸紅茜🦐1/23画集 (@malbeni) 2018年3月20日 線の太さが当に素晴らしい。 構図が非常に高度で、パース角が弱いながらもアクロバティックな画面を作れる。 絵柄のタイプ的には競合が多く、かつ強く、激戦区だがそれでも存在感を持つ。 今年は画集もリリースされ、躍進が期待される。 あすぱら Bell pic.twitter.com/GeCzfuK0Vx — あすぱら (@sushi0831) 2018年3月5日 驚異的な才能をさらに伸ばし続けている。 クリエイターから愛されるタイプ。 くっか 加湿鼠 pic.twitter.com/fcL

    この絵描きに注目!2019
  • Material Design

    Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

    Material Design
  • 配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki Ikeda|note

    どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

    配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki Ikeda|note
  • Slack のロゴが新しくなりました!

    日、ブランドデザインのリニューアル計画の第一弾として、Slack では新ロゴを発表しました。Slack 社員だけでなく、ユーザーの皆さんにも愛されてきた以前のロゴ (とデザイン) をなぜ変えるのか、疑問に感じる方もいるのではないでしょうか。そこで、デザイン刷新の理由と、新しいデザインに込めた思いをご説明したいと思います。 まず、今回の変更は、なんとなく…といった軽い気持ちで行ったわけではありません!諸行無常とあるように、何事も変化というのは避けられず、自然の流れかもしれませんが、ロゴ変更の理由としては十分ではありません。ロゴというブランドの顔を変更するのは「来のロゴの役割を果たしていない」という確固たる理由がある場合です。私たちが愛してきたロゴは、まさにこのケースでした。私たちはその事実を認め、よりシンプルでわかりやすい、ロゴとしての役割を果たす新しいデザインに進化させるため、今回のロ

    Slack のロゴが新しくなりました!
  • 灰色ハイジのときどきブログ

    2024-05-14 幸福度 ママすき ダダすき ばばすき じじすき ひいばあばすき わんわんすき にゃんにゃんすき ベイビーすき ピープルすき 一番最初は「ママ好き」を復唱させて言わせていただけだったものが、自分でアレンジするようになって、身近な物や人の名前の後に好き、と言う… 2024-05-10 帝王切開の痕 帝王切開での出産だったので、お腹に傷痕がある。子供と一緒にお風呂に入った時に、子供が傷痕を見て「ピンクー!」と呼んだ。以来、お風呂で傷痕が目に入るたびに「ママ ピンク」と言ってくる。一生付き合わなくてはいけないであろう傷痕に可愛い名前をつけ… 2024-05-08 ブログをシンプルにした ずっと課金しているのに、丸2年書いていなかったこのブログ。記事ランキングや年別アーカイブ、カテゴリ、記事のサムネイルや最初の数文字など、いろんな要素を消してシンプルにしてみた。余計なことを気に

    灰色ハイジのときどきブログ
  • 効果的なUXライティングのための16のルール | UX MILK

    Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注:当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク

    効果的なUXライティングのための16のルール | UX MILK
  • 【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け) - NOGA BLOG

    UIデザイナーの、のがちゃんです! デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 1日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。 デザイナーになる秘訣!Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG UIデザイナーで、当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。 — Tomo Tsubota (@tsubotax) 2016年6月12日 とはいえ、これからUIを学ぼうという方には、どう

    【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け) - NOGA BLOG
  • デザインのバージョン管理をする世界

    僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ

    デザインのバージョン管理をする世界
  • 暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]

    2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、当にありがとうございました。

    暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • 今年のお盆はオンライン墓参り!代行で合掌や献花もZoomで作法も服装大丈夫!

    現在でも、新型コロナウイルスの影響がすごいですからお盆期間の墓参りもオンラインということで話題になっているようです。 何でもかんでもオンラインというのは現状では仕方のないことですが、墓参りもということについてはびっくりしました。 オンライン墓参りというのは何だか罰当たりな気持ちでありますが、里帰りできない点ということを考えると自宅のお墓の様子など確認できることはいいことです。 オンライン墓参りでは、Zoomを使用をしてしてくれるそうなので「オンライン帰省」「オンライン飲み会」と言った感じでできることはいいですね。 オンライン墓参りのサービスは、ネットニュースで話題になっているのでわかると思いますが「有限会社かの石材」という広島県福山市にある墓石店がしたそうです。 こういったサービスを思い付くのがすごいなと思いますが、15年前から墓の掃除代行サービスをしていたようです。 それが、世の中大変な

    今年のお盆はオンライン墓参り!代行で合掌や献花もZoomで作法も服装大丈夫!