TOP  >  WebDesign  >  価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」 WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか？いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか？今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。 Spotify 全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。 詳しくは以下 Treehouse できることが明快で、比較

こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ

こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021

New/ old tin palette / jessiecchapman 「色彩検定2級」と言う自慢していいんだかよくわからない資格を持っている私。…が、デザイン会社勤務でありながら、どうも「色使い」と言うものに苦手意識を持っておりまして。 いざデザインに取り掛かろう！となってからメインカラーを決めて、サブのカラーを決めて、よしこれだ、あ、でも待って、こっちの色の方がいいかも、ううん、元に戻そう…あ、やっぱりこのキャミソールにしようかしら…etcetc。 さっぱり作業が進まないこともしばしばなのですが、そんな時に使用しております配色の手助けツールをまとめておきたいと思います:)

Kassandra Bay Hotel Societe Generale Fueld Films The No. 1 rule of using photography, especially big photos, to anchor a design project is quality. Don’t settle for a subpar image. Use only the best, boldest and most suited photographs for a project. Photos should always be high quality, high resolution (no pixelation). You should however, keep loading times and optimization in mind. Make sure tha

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

こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS

足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト

世界中で講演を行い、ホワイトハウスでもプレゼンテーションを行ったという「UXの第一人者」Janice Fraser氏。 UXに特化する会社を立ち上げた彼女の経験・バックグラウンドや、彼女が語る「Lean UX」などに関しては同記事の後編に譲るとして、まずは彼女が定義する「UXとは何か？」ということや、よく混同されがちな「UIとUXの違い」、更には「国を超えるとUXに違いはあるのか？」「良いUXを測るための指標」について伺った。 ◆目次（前編）◆UXとは？混同されがちなUIとUXUXに国ごとの違いはあるか？良いUXかどうかを測る指標は？◆話者プロフィール◆ ゲストトーカー：Janice Fraser LUXr, Inc. CEO @clevergirl UXデザイナー、起業家。UXを重視したウェブサービスのデザインを手がけるAdaptive Path社の共同創業者、初代CEO。 15年に渡る

2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか？サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名

2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに

最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま

先日、「A Dao of Web Design」という記事を読んでいて衝撃を受けたので、このブログでもご紹介したいと思います。この「A Dao of Web Design」には、ウェブ制作の歴史と未来が記されています。当時は存在すらしなかった「レスポンシブWebデザイン」やウェブの基本理念である「One Web」にも通じる内容です。 この記事が書かれてから12年以上たっていますが、日本のウェブ制作を次のステップに進めるためにも、「ウェブの哲学書」とも言えるこの「A Dao of Web Design」が、いま一度、日本で見直される必要があると感じています。 いったいどんな記事？ 「A Dao of Web Design」は、オーストラリア出身のJohn Allsopp氏が書いた記事で、2000年4月7日にA List Apartに掲載されたものです。John Allsopp氏は、早くからウ

これからIllustratorを始めてみようとい... / Illustratorチュートリアル【女の子】 ... / 手書き風・イラスト系のwebデザインに挑戦する方...他...全9件

Googleはこのほどウェブマスター向けの公式ブログにて、スマートフォン向けWebサイトの構築方法に関する記事をアップした。同社が推奨する構築の手順や、Google検索で良い結果を得る方法などが紹介されている。 記事の中で、同社はスマートフォン向けWebサイトの構築方法としてレスポンシブWebデザインを推奨している。レスポンシブWebデザインとは、CSS3のメディアクエリを使用して見た目を変更するWebページの構築手法。レスポンシブWebデザインを採用することで、PC用のページとモバイル用のページを同じURLにできるため、ユーザーにとってはシェアやリンクが容易になり、Googleのアルゴリズムもコンテンツを適切にインデックスできるようになるという。また、ユーザーエージェントの異なるGooglebotごとにページをクロールする必要がなく、Googleがより効率的にコンテンツを見つけられるとい

最近かつて以上にウェブサービスにとってデザインが重要だ、ということがいわれることが多くなってきた気もします。PinterestやFlipboard等、いわゆる次世代ウェブデザインを代表するようなサービスも大人気ですが、もちろんそれだけはありません。今回から新たに登場する米国の人気デザインブログspyrestudiosから、最近のスタートアップでデザインが素晴らしいサイトを35まとめた記事を紹介します。 — SEO Japan 何年か前までは誰もがWeb2.0の流行について話していた。インターネットではMySpace、Friendster、Facebook、Twitter、そして最近ではFoursquareやPinterestに続く新しいスタートアップが次々に登場している。テクスタートアップの世界では、新しいアイデアにこと切れることはない。 ウェブデザインに関しても同じことがいえる。今回、最

デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール

Photoshop is often the right tool for web design, especially if you're creating a design using numerous images and brush effects. In this tutorial, I'll show you how to create a complete grunge home page design. We'll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design. Step 1 This time we're going to create a full web design in gru