さくうち @sakuuchi__ この赤、ピンク色として好きなんですが(もうデザインができない)原色もむちゃくちゃ使ってしまう(クソ弱い)ので意識して改善したい 2019-03-17 22:55:04
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました! STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい! コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
こんにちは、NewsPicksのデザイナーのよっしーです。 NewsPicks Adventカレンダー16日目を担当させていただくことになりました。とても緊張します...。 9月に入社し現在NewsPicksのアプリの機能改善やブランドの共通言語になるデザインシステム構築、広告バナーやイベント周りのデザイン、採用にも関わらせていただいています。つい一昨日にありがたいことに開発チームの新人賞をいただきました。 そんな私は2年前、デザインを全く知らない人間でした。4年間非デザイン職について、いまでは会員数300万人・有料会員数8万人のNewsPicksのプロダクトデザイナーとしてやらせていただいています。独学でwebやUIデザインを学んできた私にとって、本は師匠です。そこで今回「デザインの基礎」「美大卒アートディレクターから学ぶブランドデザインの思考」「ユーザー体験設計」の3つ分けてその一部を
先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。 一方で「デザイナーがいない。」とよく聞きますし「誰かいない?」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっていけるのではないか。と考えるようになりました。 では、デザイナー人口を増やすには、微力ながら自分で何かできないか。と考え、いろいろトライ&エラーした結果、同じ思想を持つCocoda!に出会い共感し、アドバイザーというカタチで力添えさせて頂くことになりました。 今回は、Cocoda!チームへの初アドバイスとして、"UIデザイナーになる、もしくは、より良いUIをアウトプットできるようになる為には、何
bosyuをCasterさんに譲渡しました。 bosyuの運営会社についてbosyuは株式会社Basecampのサービスとしてリリースしました。普段はデザイン制作、プロトタイプ開発を仕事にしています。 9月で設立1周年を迎えるのでロゴを新しく作りました。 bosyuを作ろうと思ったきっかけ自分が欲しいと思ったのが一番のキッカケで、MVP開発の事例としても丁度良い規模なので作ることにしました。 ・MVP事例のポートフォリオワーク ・Twitter × OGPサービス増えた時期で自分でも作りたくなった ・規模的に丁度よく初期投資 / インフラコストも低い ・人材領域はマネタイズチャンスが多い ・最悪流行らなかったらクローズしやすい ・自分で使って数人採用できれば採算が合うような気がする ・実際にbosyu経由で複数のフリーランスの方と一緒に仕事してます 「譲渡した場合は折半」の約束でエンジニア
1: 以下、\(^o^)/でVIPがお送りします 投稿日:2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
Googleアナリティクスを使い、日々レポート作業に追われている人は多いのではないでしょうか。 分析よりも、チーム内で共有したり上司に報告したりなど、データ共有をメインに活用している。そんな人が助かるレポーティングツールやカスタムレポートを調べてみました。 本記事では、無料・有料のレポートツール、カスタムレポートのテンプレートを集めました。ぜひお役立てください。 無料レポーティング・分析ツール 無料サービスでもGoogleアナリティクスより、気の利いたレポートを作ってくれるものも少なくありません。無料とはいえ、Googleアナリティクスで標準では取れないような項目やデータまでわかるものまであります。 さすがに無料ですので、高度な集計や大量ページでのレポート作成分析までできませんがオススメです。 1.Ferretアナリティクス 簡単アクセス解析のFerretアナリティクス 弊社、株式会社ベー
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス(GDS)」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府(gov.uk)のサイトには、「デザイン原則(Design Principles)」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか? 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性
「学校では教えてくれない、89の時短テクニック」「自己流で時間をムダにしていませんか?ウェブデザインをもっとラクに、もっとすばやく」ということで、かなり実践寄りの効率的なテクニックばかりを集めたのが「神速Photoshop [Webデザイン編]」です。ちょうどPhotoshop CC+Lightroom 5が月額980円で使える「Photoshop 写真家向けプログラム」を使い始めたところだったので、しげしげと読んでみてお役立ちっぽいのがないかどうか探してみました。 まず以下が神速デザイン五カ条、「ショートカットを活用しよう」「最新機能を使いこなそう」「目的によってツールを使い分けよう」「「直し」に強いデータを作ろう」「面倒な作業は自動化しよう」ということで、どれもこれもごもっともな感じ。人は放っておくと今までの慣れ親しんだやり方が非効率的であっても「慣れているから」というただそれだけの理
photo by hstower 私は幼少期に絵本をあまり読みませんでした。しかし、そんな私にある方が「あなたが何も見えないのは絵本を読んでいないせいだよ」という趣旨のアドバイスを頂き、一時期絵本を読み漁った経験があります。その結果私が得た感想は「なるほどね」というものでした。私をその結論に導いた作品たちをご紹介します。 『ゆくえふめいのミルクやさん』 これは大人の方にも楽しめる作品ですが、是非子供のうちに読んでおいて欲しいと思います。ミルクやさんが配達をサボってふらふら~と気ままにショートトリップしちゃうお話なんですが、社会からはみ出すわけではなく適度な距離感を保つことの大事さを教えてくれます。 『おちゃのじかんにきたとら』 圧倒的なストレンジャー、虎がティータイムに訪れます。とんでもない話だけどなぜか穏やかな非日常感をゆったりと描写しています。真の刺激は日常にあることを教えてくれる作品
当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http://mattkersley.com/responsive/ ↑ 上記サイトで自分のサイトのURLを入力すれば各デバイスでどのように表示されるか確認できる。 レスポンシブ対応のAdsenseもそれぞれの大きさに合わせて表示されるのでわかりやすい。 個別ページのURLを入力すればそれぞれのページも表示されるので、トップページと投稿ページのカラムや表示を変えている人にとっても重宝する。 うん、これは便
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは? ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは? 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読!5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
作成:2014/01/6 更新:2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター 1.アクセシビリティ 2.ユーザビリティ 3.UX(ユーザーエクスペリエンス) 4.IA(情報アーキテクチャ) 5.画面設計(ワイヤーフレーム) 6.進行管理 Webデザイナー 7.レイアウト・フォントの知識 8.配色 9.Illustratorの使い方 10.Photoshopの使い方 11.バナー作成 12.ボタン作成 フロントエンドエンジニア 13.HTML5 14.CSS3/Sass 15.javascript 16.jQuery 17.WordPressテー
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる!Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
仕事でExcelを使っていて、「もっと早く見栄えの良い資料を作れたらなぁ」と思っていませんか?Excel(エクセル)の便利な使い方が分かる記事まとめ でも、もう大丈夫! 本日は、 絶対に知っておくべきExcelの便利ワザ効率UPに必須の時短ワザデータの見栄えを良くする小ワザこんなことまでできるの?!という上級ワザ など、知っていると驚くほど差がつくExcelの技をすべてご紹介します。 数あるExcel記事の中から使える記事を厳選したので、是非参考にしてみてください。 1. 知っていると絶対便利なExcelの技 簡単なのに、知っていると作業時間が驚くほど短縮できる技を紹介している良記事を厳選しました。どれも一つ一つの技は簡単なので、必ず今日から使えます! ① Do you know these Double-click Tricks in Excel? (あなたは知ってる?ダブルクリックだけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く