タグ

Webデザインとwebデザインに関するranran2918のブックマーク (9)

  • クリエイティブな広告やポスターのデザインから学ぶ!参考にしたい文字レイアウト

    広告やポスターをデザインする際、ときにはコピーの配置やレイアウトに悩むこともありますよね。そんなときに文字レイアウトや配色が参考になりそうな広告・ポスターをご紹介します。 広告デザインに参考になる文字レイアウト 選 では参考になるデザインをご紹介します。 アニメ王決定戦のポスター 出典:kettle.co.jp こちらは2011年に開催された、au EZwebから参加できるアニメ王を決めるためのクイズ大会。文字に帯を引いたり、注目させたい文字への色使いの変化が目立ちますね。2011年の作品です。 LUMINE 出典:magazine.lumine.ne.jp こちらはLUMINEの広告の中でも色使いがシンプルなもの。中央に大きくレイアウトされた文字は、半透明なのにきちんと可読性があり、白い文字の透かし具合が絶妙です。 新村水産 出典:shinmurasuisan.net こちらは「新鮮な魚

    クリエイティブな広告やポスターのデザインから学ぶ!参考にしたい文字レイアウト
  • 「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。

    quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!) それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため

    「紙っぽいデザイン」の特徴を盗め!イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
  • 【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」 | LISKUL

    Webサイトの見た目を改善するために、これまでたくさんの「配色デザイン」のや記事が投稿されてきました。これらの情報を使えばあっという間にサイトの配色を決めることができます。 ただその配色、「自分が好きな色」になっていませんか? それぞれの商品やサービスの配色には「正解」があります。 今回「サイト」「ロゴ」「コンバージョンボタン」に分けて、それぞれに対して有効な色や法則をまとめてみました。 自分のウェブサイトではどんな色が一番理想的なのか、実例を参考にしながら導き出してみましょう! また、この記事は無料でPDFとしてダウンロードも可能です。配色デザインを考える際にお手元に置いておくのがおすすめです。 【PDF】【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」>>無料ダウンロード そもそもなぜ「色彩」が大切なのか? 引用元:Why All Sale Sings Are R

    【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」 | LISKUL
  • Webデザインのアイデアに困ったら!参考になるさまざまなコンポーネントやレイアウトをまとめた -Call to Idea

    Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。

  • レース素材などが豊富なガーリー素材サイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの白浜です。 前回「ガーリーなデザインがしたい!おすすめのサイト&テクニックまとめ」を書いたのですが、まだまだご紹介しきれなかった素材サイトがあったので、part2を書きました! 引き続き、ガーリーなデザインに興味がある方はぜひチェックしてみてください。 ブラシ編 Photoshop用ブラシ ガーリーなブラシ素材、実は結構あります。まずはPhotoshopから。 無料(フリー)素材「レース(ライン)のPhotoshopブラシ素材」 http://webworkkit.minibird.jp/photoshop/brush/lacelinebrush.html シンプルで使い勝手の良いPhotoshop用のレースブラシです。種類も5つあるので雰囲気に合わせて使えそうですね。 こんな感じでブラシの間隔を調整すればビーーーっと継ぎ目のないレースのラインが引けます! ちょっと

    レース素材などが豊富なガーリー素材サイトまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ

    いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか!

  • 『3分で分かるフラットデザイン』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに?まずはどんなものか、百聞は一見にしかず

    『3分で分かるフラットデザイン』
  • webデザインの賞味期限(もしくは技術的負債の話)

    技術的負債」という話が、はてな村大字テクノロジー周辺を賑わせている。 技術的負債という(非エンジニアにとっての)隠しパラメータが生産性100倍を起こす- mizchi’s blog 出来る人からみたら超絶無駄なレビューとテストの存在意義 – novtan別館 プログラマの生産性と報酬 – アスペ日記 あたりがにぎわっているエリアだろうか。 私はエンジニアではないから全ての話の理解はできないんだけど。『見えづらい技術的負債が発生し積み重なった結果、誰かが尻ぬぐいをしている』という状況はwebデザイン、特にUIデザインの現場でも同じだなーと思ってる。 糞コードならぬ糞UIデザイン。webディレクター、webデザイナー、コーダー、フロントエンジニア皆が想定しえない余計な工数をとられてしまうUIデザイン。そしてえてして「なんでそんなに工数かかるの?」と言われ、挙句ちゃんと状況説明を上司に怠ると「

    webデザインの賞味期限(もしくは技術的負債の話)
  • WEB色見本 原色大辞典 - HTMLカラーコード

    原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見サイトです。 9種類の色見と色に関する各種サービスから構成されています。 色見コンテンツは ブラウザで定義されているHTMLカラーネーム、 日の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

    WEB色見本 原色大辞典 - HTMLカラーコード
  • 1