【保存版】コピペで使える囲み枠デザイン♪

今日のアメブロカスタマイズは

記事を書くときにコピペだけで使えるdivの囲み枠のデザインをご紹介します！

目立たせたい場所や見出し、お知らせ、サイドバーなどにお使いください。

どのテンプレートをご使用中でも使えます。

以下サンプルから使用したい囲み枠を選んで
HTML編集囲み枠コードをコピーしてお使いください。

初心者　Tips!-----------------------

コピペする場合は必ずブログ記事を
『HTML表示』編集

にして貼り付けてくださいね。

-----------------------------------------

アメブロカスタマイズ　囲み枠

シンプル影付き囲み枠

囲み枠デザインカスタマイズ１

■HTML編集囲み枠コード

<div style="border: 1px #ccc solid; padding: 20px; box-shadow: 0 2px 3px 0 #ddd; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ１
</div>

角丸背景色つき囲み枠（文字白）

囲み枠デザインカスタマイズ２-１

■HTML編集囲み枠コード

<div style="color: #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ff7fbf; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ２-１
</div>

角丸薄い背景色つき囲み枠（文字デフォルト色）

囲み枠デザインカスタマイズ２-２

■HTML編集囲み枠コード

<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ffdbed; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ２-２
</div>

角丸グラデーション囲み枠

囲み枠デザインカスタマイズ３

■HTML編集囲み枠コード

<div style="padding: 20px; background: #ffe5e9; background: linear-gradient(to bottom, #fff, #ffc0cb); -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ffc0cb)); -moz-linear-gradient(top, #fff, #ffc0cb); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFffc0cb'); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffc0cb',GradientType=0 ); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 2px 1px rgba(0,0,0,0.1); font-size: 90%;">
囲み枠デザインカスタマイズ３
</div>

付箋風デザイン囲み枠

囲み枠デザインカスタマイズ４

■HTML編集囲み枠コード

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ４
</div>

ボタン風デザイン囲み枠

囲み枠デザインカスタマイズ５

■HTML編集囲み枠コード

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #ddd inset; -moz-box-shadow: 0 0 50px #ddd inset; box-shadow: 0 0 50px #ddd inset; font-size: 90%;">
囲み枠デザインカスタマイズ５
</div>

角丸影あり点線デザイン囲み枠

囲み枠デザインカスタマイズ６

■HTML編集囲み枠コード

<div style="color: #fff; background: #3cb371; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); font-size: 90%;">
囲み枠デザインカスタマイズ６
</div>

シンプル点線デザイン囲み枠

囲み枠デザインカスタマイズ７

■HTML編集囲み枠コード

<div style="color: #fff; background: #f08080; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #f08080; -moz-box-shadow: 0 0 0 5px #f08080; -webkit-box-shadow: 0 0 0 5px #f08080;; font-size: 90%;">
囲み枠デザインカスタマイズ７
</div>

点線デザイン囲み枠

囲み枠デザインカスタマイズ８

■HTML編集囲み枠コード

<div style="color: #fff; background: #3cb371; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0<div style="border: #ff7f92 dashed 1px; padding: 20px; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ８
</div>

紙を重ねた風デザイン囲み枠

囲み枠デザインカスタマイズ９

■HTML編集囲み枠コード

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; font-size: 90%;">
囲み枠デザインカスタマイズ９
</div>

ふわっとぼかす囲み枠

囲み枠デザインカスタマイズ１０

■HTML編集囲み枠コード

<div style="padding: 10px 20px; margin: 10px; background: #ffe4e1; box-shadow: #ffe4e1 0 0 10px 10px; -webkit-box-shadow: #ffe4e1 0 0 10px 10px; -moz-box-shadow: #ffe4e1 0 0 10px 10px; font-size: 90%;">
囲み枠デザインカスタマイズ１０
</div>

シンプル角丸ボーダー囲み枠（背景なし）

囲み枠デザインカスタマイズ１１

■HTML編集囲み枠コード

<div style="border: #ffd201 solid 3px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ１１
</div>

囲み枠の色を変えたい！　囲み枠中級編

上記サンプル以外の色にデザインをカスタマイズしたい！

と、いう方

コードの中の

#ffffff（省略型#fff）

のような箇所をお好みの色に修正することで色の変更ができます。

例えば

背景色（白）・・・background: #ffffff;

文字色（赤）・・・color: #ff0000;

そもそも#ff0000←これなんなの？という方

WEBカラーコードです。

以下サイトで好みの色コードを見つけて＃以下をコピペしてください。

➡WEB色見本

（※別ウィンドウで開きます。）

アメブロカスタマイズ　囲み枠上級編

いつも同じ囲い枠デザインを使いたい場合や、毎回HTML編集囲み枠コード書くのが面倒だ！ という方。

カスタムテンプレートでcss編集が可能なテンプレートをご使用の方は

よく使うコードに好きなクラス名をつけて

簡単に囲み枠のデザインを保存して呼び出すことができます。

シンプル影付き囲み枠【css編集編】

仮に以下の枠のデザインにwakuという名前（クラス名）をつけたとしましょう。

以下css編集コードをcss編集画面でコピペで追加しておけば

HTML編集画面では以下を書くだけで

カスタマイズした囲み枠のデザインになります！

よく使う囲み枠のデザインはcss編集で保存しておくと便利ですよ♪

囲み枠の中は自由に書いてくださいね

■css編集コード

<!--囲み枠デザイン -->
.waku{  
border: 1px #ccc solid;
padding: 20px;
box-shadow: 0 2px 3px 0 #ddd;
background: #fff;
font-size: 90%;
}

■HTML編集囲み枠コード

<div class="waku">
囲み枠の中は自由に書いてくださいね
</div>

cssだけでデザインできるおしゃれなdivの囲み枠は沢山ありますので、

またどんどん紹介していきたいと思います！

ブランディングとは？をSMAPで説明してみた~Part①~

世の中の商品やサービスは

多くの方にその価値を理解してもらうために

ブランディング(branding)がされています。

もしあなたが多くの方にブログを読んでもらいたいのならば、

ブランディングの知識が必要かもしれません。

今日はその

ブランディングって何？

というのを解散で問題になっている

SMAPとジャニーズ事務所でわかりやすく簡単に説明してみようと思います。

あなたが芸能事務所で

ある無名の新商品（新グループ）をヒットさせたい！

と、しましょう。

同じカテゴリーの競合グループが他にも多くある状態で、

ヒットに導くのは難しいワケです。

では、どのようにその新グループの魅力を作り出せばいいのでしょうか？

その魅力を作り出すのが

ブランディングです。

そしてブランディングをするにあたり

-----------------------------------------------

1. コンセプト
2. ターゲティング
3. ポジショニング

-----------------------------------------------

上記の重要な要素を明確にする必要性があります。

今日はその中でも最も重要な1.コンセプトについて

ご説明いたします。

ブランディング①コンセプト

コンセプトとは

1. 誰に（ターゲット）
2. どのような場面で（シーン）
3. どのような目的のために（ベネフィット）
4. どのような価値を提供するのか（商品特性）

以上の４つから構想されます。

事務所は新グループを人気グループとして売るために

まずグループのコンセプト設定を行うのです。

さてデビュー当初

写真が古い！！

元はスケートボーイズ

というキャッチフレーズが

ついていたんですねー

(それも人数多い。。)

「Sports Music Assemble People」

歌とスポーツ(ローラースケート？)

がこなせるグループ。

というコンセプトで

作られたグループだったのでしょうか。

昔すぎて例がわかりにくいですね・・・

ただ、ジャニーズ事務所自体が例えば以下のような

一貫としたコンセプト

を持っているように感じます。

コンセプト

1. 誰に（ターゲット）
   　・・・子供から大人、老人まで幅広い層に愛される
2. どのような場面で（シーン）
   　・・・TVや音楽業界で
3. どのような目的のために（ベネフィット）
   　・・・親しみやすく笑顔や温かい気持ちになれる
4. どのような価値を提供するのか（商品特性）
   　・・・エンターテイメント性の高い国民的アイドルグループを作る

(ジャニーズファンの方多少の違いはご了承ください。。)

これがジャニーズ事務所ではない

EXILEや三代目JsoulBrothersの事務所LDHと

事務所のコンセプトが違うのがおわかりですよね？

有名な商品コンセプト例

ここでわかりやすい有名な商品コンセプトを一つご紹介します。

家庭用ゲーム機Wiiのコンセプト

『お母さんに嫌われないゲーム機』

Wiiはそのコンセプトに根ざした

家族みんなで楽しめるゲームで

ソフトも数多く販売していき、

例えば、運動不足に悩むパパやママも一緒にできる『WiiFit』や

『マリオカート』等人気を集めました。

家族の設定の関ジャニ∞や嵐が

ゲームを楽しむCMが使われています。

ジャニーズのコンセプトの

1. 誰に（ターゲット）
   　・・・子供から大人、老人まで愛される
2.  
3. どのような目的のために（ベネフィット）
   　・・・親しみやすく笑顔や温かい気持ちになれる
4.  

上記が、Wiiの商品コンセプトとピッタリ一致であったことからの

嵐と関ジャニの起用だったと思われます。

コンセプトからズレてはいけない

コンセプトで

『親しみやすさ』を打ち出すのか

『クールなかっこよさ』を打ち出すのかでは

商品名、キャッチフレーズ、イメージカラー、商品パッケージやデザイン、

全て違ってきます。

本来コンセプトというものは一貫してズレてはいけないものです。

コンセプトがズレると

今までのファンを失くす危険性があるからです。

逆にSMAPぐらいの大御所で

”親しみやすい国民的グループ”というイメージが確立すると

ツアーやアルバム毎に

あえて今までのSMAPのイメージをいい意味で裏切るような

新しいコンセプトで新たな一面を見せて

ファンを飽きさせない努力もされていました。

これはかなり上級レベルです。

TV離れの進む現在に

SMAPはなくてはならない大きな存在だったということですね。。

と、ここまで

ブランディングのコンセプトとは何か。

を簡単に説明させていただきました。

次回はまた

続きの

　　・ターゲティングとポジショニング

について

書かせていただきたいと思います。

アメブロも「多くの方に読んでもらいたい」

という方は以下のような

ご自身のブログのブランディングコンセプト一度考えてみてはいかがでしょうか。

例えばこんな感じです。

コンセプト『ほっと一息つける４コマ漫画』

1. 誰に（ターゲット）
   　・・・子育て中のママが
2. どのような場面で（シーン）
   　・・・育児で疲れたときに
3. どのような目的のために（ベネフィット）
   　・・・ほっと笑顔になれような
4. どのような価値を提供するのか（商品特性）
   　・・・４コマ漫画を描いて紹介する

以上です。

予想以上に長文になりました
読んでいただきありがとうございましたm(__)m

今京都のお寺の”webデザイン争い”が熱い！！

本ブログも現在ヘッダー画像にミニスライダーをつけていますが、

実はwebデザインでは

スライダーが今かなり進化しています。

CMのようなアニメーション効果や動画も

スライダーに埋め込むことが出来るのです。

海外サイトでは

そのようなCool！なデザインが目白押しで

日本のサイトはまだまだベタなものが主流です。

例えると

海外サイトがポスターやミニCM

だとすれば

日本のサイトはチラシ的な感じのデザインがまだまだ多いような気がします＾＾；

そうなる大きな要因に

『海外サイトは写真のクオリティと英語の”字体”がお洒落だからね～』

と、仕事をしながらデザイナーと話していたのですが

実は今、どんどんcool!なデザインに進化していっている業種があります。

京都のお寺です。

まず、写真に力が入っています。

歴史ある建築物である京都のお寺は

存在そのものがアートなので絵になります。

そこに本格的なカメラマンの手が加わり

更にまたそこに海外のCoooool！！web！！

フルスクリーンのフルスライダー

（フルスライダー＝画面いっぱいに広がるスライダー）

で作られているサイトが目白押しです。

外国人観光客をターゲットにしたデザインです。

まずは

今一番人気の”高野山”からご紹介。

高野山真言宗　総本山金剛峯寺

https://www.koyasan.or.jp/

トップページはフルスクリーンのフルスライダー

レスポンシブルで作られていますので

（レスポンシブル＝PC、モバイル等見る端末に合わせてWEBデザインを最適化）

今スマホで見ている方も綺麗なスライダーの写真は見ることができます。

 PCで見るとスライダーに蛍が飛びますので、出来ればPCでチェックしてみて下さい！

次に世界遺産　"東寺"

真言宗総本山　東寺【教王護国寺】

http://www.toji.or.jp/

トップページは

フルスクリーンのみのスクロール無しの

Flashで作られた

動画のように美しいサイトです。

残念ながらFlashなのでスマホ版は

全く動かないシンプルなデザインです。

こちらは是非PCで見てください。

最後に”清水寺”

音羽山　清水寺

http://www.kiyomizudera.or.jp/

あれ？アメブロと一緒の普通のデザインじゃないか・・

と、思いきや

いぇいぇ右上の「English」へリンクすると

ちゃんと英語版はデザインガッツリでした。

音羽山　清水寺　英語版

http://www.kiyomizudera.or.jp/en/

はい。フルスクリーンのフルスライダー

スライダーには動画が埋め込まれており

お坊さんの後ろ姿に引きこまれます。

こちらも高野山同様レスポンシブルですが

スマホでも綺麗なスライダー映像が見れます！

いずれもPCだと映像に合わせてお経が流れますのでお盆のこの季節にピッタリ　笑

一番ITやネットに疎そうなお寺が

最新のwebデザインなのは驚きですよねー笑

アメーバもアメーバオウンドは

海外サイトのようなお洒落なデザインが作れるようなので

スライダーとか入れれるのかな？

時間があるときにじっくり触ってみたいと思いますb