タグ

WebDesignとdesignに関するmizogucheのブックマーク (20)

  • 若者のウェブアプリ離れ - NZ MoyaSystem

    どうも、海外就活生のはっしーです。 自称プログラマとして、たまにはIT系のネタを。 現在、現役の大学生たちと一緒に、プライベートでウェブアプリを開発運営しています。大学生向けに、不要なを無料で譲渡しあえるプラットフォームとしてのサービスです。 テクスチェンジ 先日、この広報および運営を担当してくれているメンバーが、こんな報告をしてきました。 「はっしーさん、Facebook ログインと Twitter ログインが使えません!」 くだんのウェブサービスには、SNSのアカウントと連携してユーザ登録できるボタンを用意しています。なんでも、大学構内で新規ユーザ登録を呼びかけたところ、この機能がうまく使えなかったそうなのです。 「なにかバグがあるってこと?」 「いえ、Facebook や Twitter の アカウントをもっていても、パスワードを覚えてなくてログインできないんです」 エッ!? (

    若者のウェブアプリ離れ - NZ MoyaSystem
  • WebエンジニアのためのWebサービスデザイン実践講座

    DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)

    WebエンジニアのためのWebサービスデザイン実践講座
  • Stripe: 支払フローのアニメーションの工夫 - ワザノバ | wazanova

    https://medium.com/p/3d1b0a9b810e 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 StripeUI DeveloperのMichael Villarが、同社のサービスの生命線である支払フローにおけるデザイン上の工夫を紹介しています。支払フローはユーザの離脱の可能性が高い箇所なので、ストレスを減らす工夫は効果が期待できそうですね。 1) アニメーションで文脈を補完する gif version | MP4 version 支払のために入力した個人情報を再利用したいときのために「Remeber Me」のチェックボックスが用意されてます。それをチェックするとはじめて、Helpページへのアイコン、「安全のために携帯番号を入力ください。」という入力ボックスがアニメーションで表示

  • ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン

    さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った

    ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
  • フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。

    P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く

    フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
  • ColourCode: Color Palette Generator | Toptal®

    ColourCode: Color Palette Generator | Toptal®
  • ウェブデザインにおける透過の効果的な使い方と注意点

    半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・

  • ロゴデザインの参考になりすぎる厳選10サイト |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    あなたがロゴデザイナーなら、もしくはロゴデザインについて学ぶことに興味があるなら、インスピレーションのために優れたロゴデザイナーの素晴らしい実例を見たいに違いない。以下に紹介する10のサイトは、インスピレーションが必要な時に訪れるのに最適の場所だ。これらのサイトの多くでは、あなた自身の作品を他の人に共有することも可能だ。 Carbonmade Carbonmadeは、デザイナーがあらゆる種類のデザインのポートフォリオを投稿することができる場所だ。ロゴを専門とするデザイナーの401を超えるポートフォリオが存在する。インスピレーションを得るのに最高の場所だ。 LogoPond LogoPondは、特にロゴデザインのインスピレーションのために存在するギャラリーサイトだ。自分の作品を共有したり、他の人の作品を見ることができる。 Faveup Faveupは、ロゴ、CSSウェブサイト、フラッシュウェ

    ロゴデザインの参考になりすぎる厳選10サイト |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • 日本の伝統色の組み合わせ、襲色目(かさねいろめ)の色コードまとめ

    MS Office カテゴリ MS Office (104) 関連タグ Access (35) Excel (87) OfficeScripts (1) PowerPoint (8) Python (2) VBA (85) YouTube (6) 入門 (37) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (22) twitter (10) WordPress (76) YouTube (6) アプリ (29) イラスト (42) デザイン (15) ブログ (39) 入門 (37) 分析 (20) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaScript (7)

    日本の伝統色の組み合わせ、襲色目(かさねいろめ)の色コードまとめ
  • 100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ

    こんにちは、ウェブサービス部の宮澤です。私は現在、自社コンテンツ内で自社のサービスをPRするため自社広告の管理を担当しています。 NHN Japanには数多くのサービスが存在するため、常時20〜30の自社広告が運用されています。自社広告は細かく効果測定を行うことが可能なので、毎週5〜10のバナーを入れ替えながら最適化を図ったところ、コンバージョン率、クリック率など、ほぼすべての指標で広告効果が向上しました。 自社広告の掲載メディアに関しても、livedoor、livedoorニュース、livedoor Blog、NAVER まとめ、各種アプリと多岐にわたっており、今では新規ユーザー獲得のための重要施策の一つとなっています。 今回は100種類以上の自社広告を制作、運用してみてわかった、効果の高い広告クリエイティブを作るためのコツをご紹介します。 1. 笑顔 VS 泣き顔 まずはLINEの自

    100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

    dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
  • UIデザイン

    Build your website.Build your dream website fast and easy, without any coding. Learn more Find your own domain.This one is taken, but you can find another available domain easily. Learn more

  • 人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方

    ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装:CSS3< 角丸の実装:古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威:Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭

  • かっこいいWEBは物が売れるのか

    人の意地にかけてイギリスのダサイ病院のWEB見つけた。が、ダサイ程度では似たり寄ったりだがさすがに↑の中華思想みたいな色のは無かった。まあ、やる気の無い同士で比べても意味ないッス・・・ しかしこの人の「かっこいい」と挙げているサイトがFlashバリバリの時代遅れのものばかりで、どうも日人とは感覚が違うのね、と思ったわけ。まとめサイトみたら同じこと言ってる人がいて感心した。 27番の投稿に完全同意です。 アメリカのサイトと日のそれのデザインを比べても、日のラップと場のそれを比べて「日語はダサイ」と言ってるのと大差なく、とにかく漢字自体がもともと横書きでは無くて縦書き用だし、WEBはもともと横書きの英語にあわせて作られているのでずるいわけです。 そもそも日アメリカでの価値観に大きな差があります。日の官公庁なんて国民の誰1人も「クールにデザインして欲しい」って望んでないのでか

    かっこいいWEBは物が売れるのか
  • デザインする上で要素を目立たせるという事 |https://wp.yat-net.com/name

    デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。 人によって「赤くして」とか「大きくして」と言った抽象的な言葉で表現されますが、僕ら制作者はその言葉をそのままの意味で捉えるわけには行けません。 何故なら、依頼者が何か目的があってそこを赤くする必要がある、大きくする必要があるならばそれを取り入れば良いです。ですが、その目的がその要素を目立たせたいという場合では話が変わってきます。 そうなると、来の目的は「目立たせること」であって、決して赤くすることや大きくすることが目的では無いため、実際に赤くしたり、要素を大きくしても目立たなければ目的が達成されず満足されることは無いでしょう。 赤くして欲しい、大きくして欲しいと言うのは、依頼した人の中にある目立たせる事に直結したイメージである場合が多いので、実際に何を望んでいるのかを読み取ることが大事です。 1.要所

    デザインする上で要素を目立たせるという事 |https://wp.yat-net.com/name
  • デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

    元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいw はじめに:デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ

    デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
  • Togetter - 国内最大級のTwitterまとめメディア

    イギリスで放映されている世界最長SFドラマを視聴「Doctor Whoって大河ドラマだ...」(編集部)

    Togetter - 国内最大級のTwitterまとめメディア
  • Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ

    2014年2月25日 Web関連記事, インスピレーション 私は普段紙のをほとんど読みません。年に1冊読むか読まないか…。しかし、iPadを購入してからはなぜか電子書籍なら読むようになりました。ディスプレイで読む事の方が慣れているからですかね…?という事で私が最近読んだ無料の電子書籍をいくつか紹介します。日語のものは比較的サクサク読めるものばかりなので、空いた時間に読んでみてください! ↑私が10年以上利用している会計ソフト! インタラクティブPDFでつくったインタラクティブPDFのつくりかた〜動画/音声再生・ページ効果編〜 ダウンロード InDesignで動画や音声付きのPDFファイルの作り方を説明してます。サンプルもついています。紙のでは表現できない、電子書籍の魅力はこういった点にあると思うので、これから電子書籍の出版を考えている人には参考になると思います。 地域でメディアづくり

    Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    mizoguche
    mizoguche 2012/01/10
    ターゲット層を明確にして、ターゲット層の知り合いにいじってもらう、と。
  • 色彩センスのいらない配色講座

    UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回

    色彩センスのいらない配色講座
    mizoguche
    mizoguche 2011/09/08
    初歩の初歩って感じでしょうか。このへんの事を http://colorschemedesigner.com/ は自動的にやってくれてるわけですね。
  • 1