これからのブログはすべて新デザインシステムへ

Seesaaからお知らせがありました。 2月21日以降新しく開設するブログは、すべて新デザインシステム一択になるとのことです。 (現在は、旧デザインシステムと新デザインシステムから選択するようになっています。) ブログの新規作成における挙動について、以下のように変更させていただきます。 2015年の新デザインシステムリリース以来、ブログを新規に作成する際は新デザインシステムを利用する・しないを選択していただいておりました。 こちらについて新デザインシステムを利用しないブログの新規作成を下記日程にて、提供終了とさせていただき、以後のブログの新規作成は、全て自動的に新デザインシステムで行わせていただきます。 ■予定日 2017年2月21日 ── 【Seesaaブログ】ブログ新規作成における変更のお知らせ - Seesaaからのお知らせ 新デザインシステムへのシフトに伴い、デザインテンプレートが200件ほど追加されたということなので、見てみましょう。

続きを読む

色からのアプローチ(4) True Colors-2/2

[追記] 2013.9.27 1つ図を飛ばしていました。すみません!<(_ _)> 一番最初に追加しました。 * 色からのアプローチ(3) True Colors-1/2の続きです。 消費者の反応 人々は、異なる色にどんなふうに反応するでしょうか? 色はそれぞれ異なった反応を引き出します。 研究はそれぞれの色がどう私たちに影響するかを明らかにします。 業種 左から順に、 エネルギー、金融、航空、飲食、家庭、 テクノロジー、健康、衣服、車、農業

続きを読む

色からのアプローチ(3) True Colors-1/2

前回は何となく色を眺めるスタンスでしたが、今回はちょっとお勉強モード。ちょっとだけね。^^ ロゴについての情報や解説が満載のLogoblink.com(英語)というサイトで、デザインが見やすくて美しく、色に関する読み物として有益なものを見つけたので紹介します。 Infographic: colors of world brands - Logoblink.com いつものことですが、日本語訳は機械翻訳に頼り切っている意訳です。実は、よく分からない部分もあったりします(汗)。明らかに間違っているところを見つけたら、優しく教えてくださいね。

続きを読む

色からのアプローチ(2) 最も強力な色

私を含め、デザインを生業としていない人は、色のセオリーに乗っ取ってデザインするのが難しいと感じているのではないでしょうか。 その辺の解説については本やサイトが山のようにあると思うので、理屈から入るアプローチはそちらに譲るとして。ここでは色を感じてみようと思います。 色を感じる良い題材を見つけたので、紹介します。

続きを読む

色からのアプローチ

「配色サンプルを作る」を書き始めてから、すっかり色からのアプローチが楽しくなってしまいました。 で。まさに色からwebデザインにアプローチするサイトを見つけて、とっても楽しくなっちゃったので、みなさんにもご紹介します♪ Colors - CSSMania http://www.cssmania.com/colors/ 英語サイトだけど、色のコードだけわかれば…いや、コードなんて知らなくても、気に入った色をクリックするだけで楽しめるから大丈夫♪ CSSManiaのサイトのスクリーンショットで良く使われている色が並んでいます。 ずらーっと並んだ全189色 青とグレーの色幅が多いかな。 かく言うこのブログも水色がメインです。^^ だって、目が疲れにくいし、他の色とケンカしないし、嫌味がないから使いやすいんだもん。 そこをあえて(笑)、赤い色を見てみましょう。色のコードは#CC1919。 指定した色か類似色を含むサイトデザインのサムネイルが並びます うひゃー、カッコイイ! 自分じゃ絶対できない色づかいとデザイン♪  サイドに出てくるカラーパレットも要チェック ベージュ系と赤の組み合わせ、いいよねー♪ とか言いつつ、#E5E5E5や#CCCCE5のサムネ群にすごくそそられる(笑)。ベースカラーとして使いやすいし、品良くまとまるのかもしれない。 やっぱりね、王道だけど、よいデザインをいっぱい見て目を肥やす…

続きを読む

配色サンプルを作る(3)

前回まではこちら配色サンプルを作る(1) 配色サンプルを作る(2) AdobeのKulerは人が作った配色を参考にするものでした。単に配色を作るだけのものは他にもあります。今日はその一例をご紹介します。 HTML Color Combination Chooser - Web Design for Developers http://colors.napcsweb.com/colorschemer/index.html 英語ページですが、英語がわからなくても、スライダの意味がわかれば使えると思います。カラーパレットを見ているだけで、楽しいですし♪ Kulerより軽く、さくさく動く気がしますね。 Monochromatic Analogic(base + neighbours) Analogic+(base, neighbours + compliment) Split Complimentary Triadic Dobule Contarast とまぁ、こんなふうに、いろいろなテイストの配色サンプルが得られます。いろいろいじって確認してみてください。 やみくもに色を決めるのではなく、こうして計画的な配色をしたほうが、より洗練されたWebデザインができるのにねぇ…という自嘲と反省をたっぷり味わいつつ終わります。^^; ↓参考になったら、クリックで応援してね!↓ マイペース更…

続きを読む

配色サンプルを作る(2)

前回の「配色サンプルを作る(1)」はこちら。 Kulerの配色サンプルを見たり、自分好みにカスタマイズしてみました。 トップページに気に入ったものがなかったら、どんどんどんどんページをめくっていきましょう。ただ、今日現在、全部で17,811例(1,782ページ)ありますから、1つずつ見ていくには膨大すぎです。1,000ページを超えるボリュームを一気に見ると、眼精疲労&頭痛に見舞われるでしょう。経験者は語る(笑)。 そんに膨大なデータを効率良く探すための手掛かりとして、「Themes」を使うのがいいのではないかと思います。Newestだけでなく、他のカテゴリもぜひ見てみてくださいね。 Themeは左サイドにあります あるいは、キーワード検索も有用かと。 検索窓では、配色名の検索ができます。webサイトで「Kulerの△△という配色を参考にしました」と書いてあることもあります。そういのはそのまま配色名を検索すればいいし、色のイメージになりそうな言葉で検索するのも面白そう。例えば「ocean」「snow」「autumn」「leaf」とかね。 試しに、「berry」で検索してみました。 原寸を表示するには、2回クリックしてね 一番上は、柊のイメージのクリスマスカラーですね。ラッピングとかにも使えそう♪ 他は意外と渋い? ブルーベリーぽいのが多いかな? 写真から色を抽出することもできます。 ブログで使うとしたら、ヘッダーの写真に合った色を…

続きを読む

配色サンプルを作る(1)

デザインには欠かせない配色(色の組み合わせ)を作る無料のサービスを紹介します。 まずは、大御所AdobeのKuler。 Kuler http://kuler.adobe.com/  大きな画像を見るには2回クリックしてね。 要は、誰かが作った配色見本がたくさんアップされているのです。たくさんあるから、探しやすい工夫がされているので、がんがん見ていきましょう。さすがにページ自体がおしゃれで、操作もしやすく、眺めているだけでも楽しいです。 このサイトは英語サイトです。英語がわからない? 英語を見ただけで頭の中真っ白になっちゃう? そんなあなたに、ちょっとだけ解説しましょう。私もたいして英語わからないけど(笑)。 最初のページは、Newest(新着)が表示されています。 気になった配色をクリックしてみます。 クリックします。 どどーん。色の壁みたいになります。冬っぽいですね。ベージュのコートにピスタチオ色のマフラー、ボトムはグレー、って結構定番のコーディネートですね。 色の部分をもう1回クリックすると、元の画面に戻ります。 この配色が気に入ったら、色の番号(カラー値)を見ましょう。 横スライドバーのアイコンをクリック RGBだけじゃなくて、いろいろ出てきます。 HTMLやCSSで指定するのは一番下の「HEX」。この明るいグレーは「CCD1D9」。実際に使う時は、頭に「#」を付け…

続きを読む

「自由形式」を使う (1)

今日の話は、Seesaaブログのみが対象です。 「さあ、カスタマイズするぞー」ってことでコンテンツを追加するときに、一番使うのが「自由形式」じゃないかと思います。その「自由形式」の話。 コンテンツの追加方法については、下記のSeesaaブログのヘルプページをご覧くださいね。 ブログ ・ヘルプ: コンテンツの追加方法コンテンツ配置の編集方法 さて、本題はここから。 追加しただけでは、「最近の記事」とか「最近のコメント」「カテゴリ」などのコンテンツと設定が違うことがあります。その辺はブログデザインによって違うかな。 このブログのデザインではこんな違いが出ます。 今日使っている画像は、若干縮小してあります。原寸はクリックしてご覧ください。 右が初期状態。左がCSSで指定してあるもの。他のコンテンツはCSS指定のほうのデザインになってますから、これだけ違うと違和感がわいてきて、頭をボリボリかきむしりたくなっちゃいます(笑)。 何が違うかというと。 フォントのサイズや行間だけでなく、いろいろ違うわけですね。 何が違うかわかったところで、CSSで指定する設定にしましょう。 「自由形式」の編集画面で、「コンテンツHTML編集」というところをクリックします。 初期状態は、 <% content.header -%> <% content.free.text %> <% conten…

続きを読む

カレンダーのデザイン(2)

カレンダーのデザイン(1) の続きです。 カレンダーの日付エリアの背景は画像にすることもできます。 というわけで、今日は、テンプレート「突撃!合戦スタジアム」のカレンダーを改造してみます。 ↑こんなデザインです ↑背景画像 この画像、何なんでしょう? 血のり?(-_-;) き…気分を取り直して、CSSのカレンダーに関わるの次の部分いきましょう。 #calendar { font-size:12px; width:190px; margin:0px; padding-bottom:10px; } #calendar table { background-image:url(http://blog.seesaa.jp/img/bg/battle_stadium/cal_bg.jpg); background-repeat:no-repeat; background-position:0px 0; width:100%; padding:0px 0; margin:0 auto; } #calendar th { padding:3px; font-weight:normal; text-align:center; } .calendarday a { font-weight:normal; color:#F27045; } .calendarhead{ background-image:url(http://blo…

続きを読む


SPONSORED LINK