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

  • 色いろ色

    gakepp
    gakepp 2013/05/31
    色相予想 手順1:最小値を0%とする 手順2:最大値を100%とする 手順3:残りの数値の割合を求める
  • 美しいレイアウトを計算してくれるツール :: Love & Design ::

    以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組(2カラム)するとき 横幅780px の場合 黄金比:横幅 / 552px / 228px 白銀比:横幅 / 512px / 268px 白金比:横幅 / 571px / 209px 第二黄金比:横幅 / 565px / 215px ↓もしかして黄金比? これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ

    美しいレイアウトを計算してくれるツール :: Love & Design ::
    gakepp
    gakepp 2012/02/27
    白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツール
  • ウノウラボ Unoh Labs: グラフィック作りのコツとカン

    こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基のき 具体的な話に入る前に、まずは基的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上

    gakepp
    gakepp 2012/01/31
    基本。色相の違う複数の色のグラデーションを作ってみるときれいなグラデーションができたりします。
  • 愛生会病院

    小坂町へアカシアドライブ 先日、小坂康楽館通りにあるアカシアを見に行ってきました。風が少し強い日でしたが満開のアカシアが花吹雪となり綺麗に舞っていました。噴水の音を聞きながら「風が気持ちいいなぁ」と、景色を眺め、花壇の...

    gakepp
    gakepp 2010/10/26
    ネオン多用、デコトラ
  • おまとめ侍:【WEBデザインの真髄はやっぱ「色彩」だよな】

    gakepp
    gakepp 2010/10/26
    WEBデザインの真髄はやっぱ効果的な「色彩」の配置だよな/色・大きさ・配置・語句を統一する事で生まれる「視認性」と、製作者の意図が読み取れる「的確性」が真髄。Webは「見せる」事より「使ってもらう」事が重要。
  • aruko.net - このウェブサイトは販売用です! - aruko リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    gakepp
    gakepp 2010/08/30
    最初から雑多な色を乗せていって全体のバランスを調整する「減算法」ではなく、白黒などのモノトーンから色を加えていく「加算法」。白黒や青白、赤白などで最初にトーンを決定して、そこに色を重ねていく。
  • 面接(するほう)疲れた・・・

    1 名前:以下、名無しにかわりましてVIPがお送りします:2010/03/19(金) 20:06:05.44 ID:Batnq86b0 5日間で11人面接。 上司がいい加減な求人出すから、未経験者や、変なのが沢山来た。 なぜかチャラいのとか、ビッチもいて、ちょっと冷たくあしらい過ぎたかも。 うちはデザイン事務所で、雑誌・広告・看板・パッケージなんかを作ってる会社。 なんかこの業界、舐められてるのかな・・と思った。 で、気づいたんだけど、妙にハキハキした奴って、逆になんか嫌だ・・。 どうせ面接用のキャラだろとか思ってしまう。 7 名前:以下、名無しにかわりましてVIPがお送りします:2010/03/19(金) 20:08:09.75 ID:CtHRufF00 >>1そこを見抜くのが面接官だろ >>7 初めて面接したんだよね。こんなに疲れるとは・・・ 23 名前:以下、名無しにかわりましてVI

    gakepp
    gakepp 2010/08/16
    広告デザイン事務所
  • IDEA * IDEA

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

    IDEA * IDEA
    gakepp
    gakepp 2010/05/03
    「So You Need A Typeface」はどんな場合にどのフォントを使うべきかを教えてくれるチャートである。書籍なのか、新聞なのか、招待状なのか、簡単な質問に答えていくだけで「このフォントでしょ!」と教えてくれる。
  • Webデザインがつまらなく感じてしまう理由 - komagataのブログ

    Webデザインがつまらなく見えてしまう理由 : could 今、私たちがしている仕事は Web をデザインしているというより「この要件を満たすためには A と B と C がいる」という組み合わせを探して組み立てているだけに過ぎないのではないかと感じることがあります。紙デザインへの憧れとノスタルジーを感じながら、どうにかして Web へそのまま移行しようと努力していることもあります。そうした試行錯誤をデザインプロセスと呼ぶことはありますが、これらの仕事をする人が Web デザイナーであるとするのは少し寂しいことだと思います。 こちらのエントリーを読んでつい最近感じた疑問が整理された気がしました。 この間、会社で同僚が他の紙媒体出身のデザイナーの方と共同作業したときに、こちらのユーザービリティやアクセシビリティの考えと、先方のデザインが尽く噛みあわなかったということが起こったそうです。同僚の

    gakepp
    gakepp 2010/03/10
    紙媒体デザインとWebデザインは違う、Webデザインは「絵画」「椅子」「映画」「音楽」「ゲーム」「広告」「ネットワークを利用した未知のコミュニケーションツール」などを含み、何を作るのかで目的や方法論が全く違う
  • ユーザーの視線を惹きつける、訴求効果の高い画像の使い方

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

    gakepp
    gakepp 2010/03/01
    ユーザーの注意を惹きつける画像を使用する場合、画像の数を少なくするのは効果的/印象に残る効果的な画像の使い方の1つにセクシーな画像を使用する方法が/ライトとシャドウを巧みに使用すると、非常に効果的です。
  • web計。

    webデザイナ向けアレコレ計算式、略してweb計。 WordPressのfunctions.phpでのカスタマイズをコピペで簡単にできるWP-functions generatorもどうぞ 大丈夫だとは思いますが、計算が違ってても責任は負いかねます。いちおう免責として。

    web計。
    gakepp
    gakepp 2010/03/01
    webデザイナ向けアレコレ計算式、略してweb計。
  • 素敵なデスクトップを作ってみませんか?:柴犬速報

    207 名前:以下、名無しにかわりましてVIPがお送りします[sage]:2009/09/30(水) 01:12:38.91 ID:xS57Q4+N0 どう? 209 名前:以下、名無しにかわりましてVIPがお送りします[sage]:2009/09/30(水) 01:14:08.55 ID:KeaEzHAB0 >>207 KI・MO・I☆ 217 名前:以下、名無しにかわりましてVIPがお送りします[]:2009/09/30(水) 01:19:02.18 ID:hsRmXALz0 >>207 もうちょっとカラフルにしていい気がする 手につけてるやつの色に合わせるとか 219 名前:以下、名無しにかわりましてVIPがお送りします[]:2009/09/30(水) 01:20:52.42 ID:pdRbWBFxO >>207 左上の人の写真と左下のGBとかのバーはなに? フリーソフトだったら教え

    gakepp
    gakepp 2010/02/17
    アイコンツール・デスクトップカスタマイズソフト・Dock関連まとめ・Launcherまとめ
  • Colors+DesignBlogProject[カラーズプラスデザインブログプロジェクト]│ Ameba(アメーバブログ)

    アメーバブログ(アメブロ)は無料で簡単にブログが作成できます。好みに合わせて選べるデザインスキンをご紹介いたします。

    gakepp
    gakepp 2010/02/01
    「服を着がえるように、ブログを着がえよう。」2008年6月開始
  • 色で選べる Web デザインギャラリーまとめ

    Web デザインを考えるとき、色彩のイメージはとても大切です。配色のヒントは Web 上だけではありませんが、配色に悩んだときに便利な、色で選べる Web デザインギャラリーをまとめてみました。 イメージに合った色の選び方や、レイアウトもとても参考になります。

    色で選べる Web デザインギャラリーまとめ
    gakepp
    gakepp 2010/01/29
    ひとくちにピンクと言っても、「清楚なピンク」や「無駄にエロいピンク」など色々あるので、言葉で説明するより「このサイトのこの色」と実際に見せたほうが早く正確に伝わるし、そのほうが制作側も助かりますよね。
  • デザイナーが相手にアイデアを伝えるときの心構え

    国内外問わず、優れたデザインのサイトが増えてきているのを見ると、デザイナーと開発者が分断されているイメージは昔のものと感じることがあります。全体的に見ればそうなのかもしれませんが、悩んでいる方も少なくないも現実。技術的な要素が非常に強いと同時に、感性だけでは成り立たたない Web デザインにおいて、自分とは違う分野の方とのコミュニケーションは永遠の課題といえるでしょう。良いデザインを作り出すためには、どのようなことに気をつければ良いでしょうか。 以前執筆した「建設的な会話をするために気をつけておきたいこと」も似たようなトピックを扱っているので興味がある方はどうぞ。 開発者になる もちろん職として仕事にしろという意味ではありません。Perl でも PHP でも Ruby でも何でも良いので、簡単なプログラムを作ることで彼等がどのような考えでモノを作り上げているのか分かります。開発者の声

    デザイナーが相手にアイデアを伝えるときの心構え
    gakepp
    gakepp 2010/01/29
    ビジネスにおけるデザイナーは、表現者ではなく、適応者・助長者。開発者やビジネス関係者の明確でない思いをいかに形にするかが鍵。Webdesignの歴史は浅いが、探せば論理的にデザインを説明する文献や資料も隠れている
  • よりよいWebデザインにするための配色のセオリー :: Love & Design ::

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

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ

    「この発想はなかった!」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを2つ追加してみた。交配させるために2つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。4人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。3人の子供が第二世代に誕生した。4. さらに交配!今度

    gakepp
    gakepp 2009/11/11
    実験段階
  • 透過をきれいに使ったウェブデザインいろいろ - DesignWalker

    透過をきれいに使ったウェブデザインいろいろ - DesignWalker
  • ウェブのテキストがもっとも読みやすい文字色と背景色は? | POP*POP

    1997年の研究ではありますが、「ウェブ上のテキストがもっとも読みやすいのはどういうとき?」なるものが紹介されていました。 » Web page readability: Green text on yellow works the best この研究では、フォント、色、スタイルをいろいろ変えてどの組み合わせが読みやすいかを調べたようです。 いくつか参考になりそうな結果があったのでご紹介していきます。 では早速その研究結果から。 もっとも読みやすかったのは「黄色の背景」に「緑の文字」だそうです。ただしフォントが斜体のArialのときはこの組み合わせは最悪だそうです。 Times New RomanのほうがArialより読みやすい。 フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。 ↑ こんな感じですね・・・。 「グ

    ウェブのテキストがもっとも読みやすい文字色と背景色は? | POP*POP
    gakepp
    gakepp 2009/08/08
    フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。
  • 色覚シュミレーションモニター FlexScan U | EIZO 株式会社ナナオ

    [フレックススキャン ユー] カラーユニバーサルデザインのためには、誰にとっても 見やすいものになっているか、制作の段階で確認することが大切です。 FlexScan Uシリーズは高い表示性能を持つ液晶モニターと 色覚シミュレーションソフトウェアの組み合わせで、 色弱者※の色の見え方をシミュレーション表示。 印刷物や案内・警告表示などのデザイン、Web制作、 動画編集などにおいて作業効率アップをサポートします。

    gakepp
    gakepp 2009/06/11
    お値段130000~