タグ

WEBデザインに関するsolid_methodのブックマーク (274)

  • IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

    >> 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6(Internet Exproler 6)ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な

    IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
  • Webデザイナーさん、デザインを複数案作るとき、どんなことに気をつけてますか?

    ☆ご注意☆ この記事は 2011年7月23日 に書いたものです。情報が古い可能性がありますのでご注意ください。 デザイン案についていつも考えてる事、悩んでる事などをまとめてみました。 いつも孤独に作業してるので一般的にどうしてるのか知りたい!! デザイン案っていくつ作ってますか? 私は毎回2案作っています。 理想としては2~4案だと思うのです。 でもちょっと今の環境では時間的、コスト的に2案出すのが限界で、、、(´・ω・`) 前の制作会社にいたころはデザイナーの人数も多かったので3人×2案の6案、コンペ形式っていうのもありました。 同じトップページでもデザイナーによって同じ条件でも出来上がるものは全く違いますから、自分とはぜんぜん違う方法で表現したりしていて、デザイナー同士もすごく勉強になって、個々の引き出しが増える技術力UPになります。 クライアントにとっても、たくさん判断材料があるし、

    Webデザイナーさん、デザインを複数案作るとき、どんなことに気をつけてますか?
  • 思わず泊まりたくなるホテルや旅館のWEBサイト〜国内篇〜 | minspi

    私は18歳になった時からパチンコやスロットをするようになりました。総合的には負けていると分かっていても止めれません。時には消費者金融からお金を借りてまでパチンコ屋に行く事もあります。結婚し、に「お金を借りてまでギャンブルするなんて最低!」と言われてしまいました。怒るのも分かるのですが、パチンコ代の為に消費者金融からお金を借りる事は、そこまで悪い事なのでしょうか? 自己責任です!!例え負けても文句は言えません!! 消費者金融でも銀行でも、使い道自由なカードローンという事なので、ギャンブルに使っても問題はありません。貸付の条件としても事業の為の融資は不可という事は多いですが、ギャンブルはダメとは書いていませんし。ただし、ギャンブルに利用するお金は自己責任になります。言い方を変えると自業自得です。それが分かっているならば、私は問題ないかと思います。 私の旦那もクレジットカードのキャッシング機能

  • 制作中の面倒を解決するFireworksの拡張機能のまとめ(2011年7月版) | Webデザインのタネ

    一定期間更新がないため広告を表示しています

    制作中の面倒を解決するFireworksの拡張機能のまとめ(2011年7月版) | Webデザインのタネ
  • ウェブ配色ツール Ver2.0

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

    ウェブ配色ツール Ver2.0
  • 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice

    私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 (※文中のショートカットキーは全てMacの場合です) 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う

    私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
  • ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方

    あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ

  • 「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは?

    2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ!すべてはプロモーションとコンテンツ次第なんだぜ!」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト! なぜWebデザインは重要なのか? 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか? ユ

    「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは?
  • webデザインにおける視線誘導のおはなし | 07design.blog

    こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す

  • not found

  • カテゴリー別配色アイデア100

    2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね!ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ(?)のCOLOURloversから、「これは!」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください!また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト! 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と

    カテゴリー別配色アイデア100
  • 日本のWebサイトの404ページデザインいろいろ+α - かちびと.net

    気になって探したのですが、ググッても 9割は海外のデザインだったので、日 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ

  • こんなWebデザイナーは成長しない

    2013年3月23日 ライフハック Webデザイナーのみなさん、自分を成長させるためにしていることはありますか?効率化をはかるため、よりよいデザインをするためにしていることはありますか?今回はあえてこんな記事のタイトルをつけましたが、ではどうすれば成長できるのか?という点も一緒に考えてみました。もし当てはまるものがあれば一緒に解決策を考えてみましょう! ↑私が10年以上利用している会計ソフト! 情報収集をしない Web業界では新しい技術や情報が毎日のように更新されていっています。情報が多すぎてついていけない…新しい事を覚えるのがめんどくさい…という人もいるかもしれませんが、私たちはWeb業界で働いているんです。Web屋にとって情報は武器です。日々の情報収集が仕事に役立つという場面も多くあると思うので、日頃から新しい情報にふれるくせをつけておきましょう。よく読むブログはRSSリーダーに登録し

    こんなWebデザイナーは成長しない
  • WEBディレクターがやってはいけない7つの事。|designaholic -Creative Column-

    WEBディレクターがやってはいけない7つの事。|designaholic -Creative Column-
  • 「ホームページを作る人のネタ帳」さんのリデザインをしました

    2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました!リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト! 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね

    「ホームページを作る人のネタ帳」さんのリデザインをしました
  • 絶対見ておきたい有名企業のスマホサイトまとめ (1/5)

    この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日のスマホサイトは2年間でこんなに変わった iPhoneAndroidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

    絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
  • [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

    これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み

    [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
  • 効果的にコンテンツを配置する代表的な3つのレイアウトとは

    ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象

  • 効果的に「奥行き」をデザインに与えているウェブサイトのまとめ

    ウェブデザインにスパイスを効かせる一つの方法に、奥行きを与える、があります。フラットなデザインではなく、エレメントを使って奥行きを作り出します。 そんな奥行きを効果的にとりいれたウェブサイトを紹介します。

  • YUKI HARUYAMA Portfolio Site | 春山 有由希

    春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル(現ラクマ)のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE

    YUKI HARUYAMA Portfolio Site | 春山 有由希