タグ

webデザインに関するlastelのブックマーク (133)

  • 配色に自信がなくても!Webデザインが好きになる配色ツールと使い方

    2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト! ウェブ配色ツールを使った基的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです! オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色(=同

    配色に自信がなくても!Webデザインが好きになる配色ツールと使い方
  • ウェブ配色ツール Ver2.0

    的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています(ただしフォントは変更出来ません)。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ

    ウェブ配色ツール Ver2.0
  • nanapiのデザインプロセス(その1) - エスカフラーチェLLC

    9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん(以下、けんすうさん)から :HOWTOサイトをつくりたいからデザインを依頼したい! ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる!?合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時

  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

    デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

  • ワンパターンなウェブデザインから抜け出すための10のヒント

    10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め

  • よりよいWebデザインにするための配色のセオリー :: Love & Design ::

    第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比)

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • 0to255

    Hex code RGB functional notation HSL functional notation Distance from base color HSL lightness value Click to copy Pre-orders now open! Color Studio transforms 0to255 into a comprehensive color tool that's ultra-efficient, inspiring to use, and delightfully unique. Available Spring 2024. Read the announcement Pre-order Color Studio 1 year at $2/month + 3 months free “A near perfect color picker”

  • 主要なブラウザをモニターいっぱいに広げた時の表示領域一覧表

    640x480, 800x600, 1024x768, 1280x960, 1600x1200の五つのモニターサイズでIE, Fx, Safariなどのブラウザをいっぱいに広げた時に、ブラウザ内の表示領域をまとめた一覧を紹介します。 Web Safe Area 表では各ブラウザの表示可能な領域と、全てのブラウザで表示可能な領域が一覧となっています。 Compare Web Safe Area(全てのデータ) 現在、掲載されているデータは下記の通りです。 モニターサイズ 640x480 800x600 1024x768 1280x960 1600x1200 OS+ブラウザ Windows Vista + IE Windows Vista + Fx Windows XP + IE Windows XP + Fx Mac OS X + Fx Mac OS X + Safari また、サイトでは各

  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • 就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス

    2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します! ↑私が10年以上利用している会計ソフト! 最新版書きました!こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう!2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか?何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記

    就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
  • ハイパーテキストリンクのスタイル大全

    ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク(リンク)はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです

  • デザインの基礎知識として覚えておきたい「バランスの良い縦横比」|blogs.com

    はてブ twitter delicious livedoor クリップ Tumblr Instapaper メールで送信 デザイン・アート 2010.01.14 0 山田井 ユウキ 今回ご紹介するのは「Love & Design」から、「覚えておくと便利なバランスのよい縦横比とバナーサイズ」という記事です。 別にウェブに限らず、TVの画面や名刺などデザイン的に「見やすい」とされる比率は日常生活のあらゆる場面で使われていますので、覚えておいて損はないと思いますよ。 記事によると、バランスの良い比率とは次の通り。 1 : 1.4 日建築やハガキ・用紙サイズに用いられる白銀比 1 : 1.6(または5:8) 名刺などに用いられる「最も美しい比」とされる黄金比 3 : 2 フィルムカメラで使われる伝統的な縦横比 4 : 3 PC のディスプレイやアナログテレビの縦横比 16 : 9 デ

  • WEBデザインの評価・リンク集 || WEBデザイン・データベース【WEBdeDB】

    WEBサイトを制作される方々にとって「果たしてどんなWEBデザインがベストなのか?」はいつもつきまとう疑問かと思います。WEBdeDBでは多くの既存WEBデザインを体系化し、ユーザーからの評価によって「いいWEBデザイン」を導き出そうという試みのサイトです。 現在実験的にWEBデザインの評価システムを実装しています。WEBデザインの評価を直感で10段階評価してみてください。よろしくお願いいたします。(※現在評価機能はご利用いただけません)

    WEBデザインの評価・リンク集 || WEBデザイン・データベース【WEBdeDB】
  • Mana’s Portfolio Website

    Web Designer Blogger Writer Web Design Instructor Career Adviser Mana I am a Japanese Web Designer and also the creator of the popular blog “Web Creator Box”. I’d worked in Japan, Canada, Australia and the UK. If you have any comments, please feel free to follow on Twitter and CodePen!

    Mana’s Portfolio Website
  • UIデザイン / モックアップ作成に使える素材集 – creamu

    UIデザインやモックアップ作成のための素材を探している。 そんなときにおすすめなのが、『A UI Design and Prototyping Treasure Chest』。UIデザイン / モックアップ作成に使える素材集です。 テンプレートやアイコンなど、いろいろと揃っていますね。 Browser Templates For The Website / Web Application Designer デザインラフの確認に使える、SafariやIE、Firefoxのブラウザテンプレート。800x600px、1024x768px、1280x1024pxの3サイズがPSDで用意されていて、レイヤーに分かれているので使いやすそうです Vector Pack: Browser Screens and Website Elements こちらもSafariのテンプレート。aiとepsが入っていて

  • Web制作時に色(カラー選定)で困った際に役立ちそうな13のツールやサービス - かちびと.net

    Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま

  • ユーザーの視線を惹きつける、訴求効果の高い画像の使い方

    Smashing Magazineのエントリーから、画像を使ってユーザーの視線を惹きつけて、印象に残るメッセージを伝えるウェブサイトを紹介します。 Vivid Imagery In Modern Web Design 上記サイトでは、他にも例を掲載しています。 各サイトの解説は、簡単な超意訳です。 Komodomedia ウェブデザインで大切なものの一つに、視覚的に魅力的であることがあげられます。 カラースキーム・タイポグラフィ・ホワイトスペースが絶妙なバランスで使用され、さらに画像が大きな相乗効果を生み出しています。 Mark Jardine ユーザーの注意を惹きつける画像を使用する場合、画像の数を少なくするのは非常に効果的です。このサイトでは1つのイラスト画像しか使用していませんが、ギターの少年はギターがとてもうまく見えて、そのイラストは印象に残ります。

  • Webデザインに黄金比を取り入れよう - Re:Creator’s Kansai

    PR 「おすすめのレンタルサーバーランキングが知りたい」「人気のレンタルサーバーを比較したい」という方に向けて、2024年3月最新の人気レンタルサーバーのおすすめ9社をランキング形式で紹介します。 当記事ランキング1位のレンタルサーバーがキャンペーン中! シン・レンタルサーバーがキャンペーン実施中!(2024/5/20まで) 実質385円~「利用料金50%キャッシュバックキャンペーン」 出典:シン・レンタルサーバー公式サイト シン・レンタルサーバーでは、2024年5月20日(月)まで月額利用料金が実質半額になるキャンペーンを開催中です。 ベーシックプランの36ヶ月契約なら、「13,860円」キャッシュバックで、なんと実質「385円/月」で利用できます。

  • バナー広告デザインまとめ - DesignWalker

    バナー広告デザインまとめ - DesignWalker
  • 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design ::

    この記事へのトラックバック ウェブデザインにも、「黄金比」「白銀比」 Excerpt: 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design :: 黄金比や白銀比の縦横比や色々なバナーサイズの紹介。 美しいモノは��... Weblog: 日々、ウェブデザインとネットニュースとゲームとか。 Tracked: 2008-04-25 23:55 バランスのよい若草? Excerpt: 縦横比……。 ずっと以前から、 タテとヨコの比率によって、美しく見える割合が研究されてきました。 覚えておくと便利なバランスのよい縦横比とバナーサイズ Love & Design 白銀比、.. Weblog: ウェブライター流転記(改訂版) Tracked: 2008-05-12 21:44 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & De

    覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design ::