美容サロンコンサル・マツエクスクール・オーダースーツ・Webデザインは『INCEPTIONグループ』。

当ブログについて

筆者について

Webスタッフプロフィール

Webスタッフ

WebスタッフをSNSでフォローするならこちら


Post Title

デザインコンサルティング部門【Re:birth】について考えた事

こんにちは、Re:birthのRe:ngo(Ringo)です!

 

前回の「お好み焼きを美味しそうに修正する」記事が完結していませんが、ついさっき試験的にやってみたことの”メモ”として今日のブログにアップさせてもらいます!

 

 

 

僕適に、おそらくこれ結構重要なメモかな、と。

 

 

 

で、その今日やってみたことというのが

 

「Re:birthのロゴを”画像”ではなく、HTMLとCSSを使って”テキスト”としてWebページ上に表示させる」

 

というものです。

 

 

 

 

あれ?もしかしていまいちピンときてない感じですか…?

 

HTMLとかCSSとかよくわからない方も、とりあえずスクロールして最後まで読んでみてください!

 

 

では内容に入る前にまずは、今年の6月に完成している「Re:birthのロゴ」を見てもらいたいと思います。

 

↓これがRe:birthのロゴです。

 

reロゴ透過

 

「生み出す」っていうのと「逆転」という意味の2つの”リバース”が合わさっているデザインなんですが、これは「テキスト」ではなくて「画像」になります。

 

 

で、今回はこのロゴを「画像」じゃなくて「テキスト」で作ろうという感じです。

「テキスト」と「画像」の違いがわからないって人は、文字を選択してコピペできるかどうかで判断してみてください。

文字をドラッグして一文字ずつ選択できていたら、それは「テキスト」です。

一文字ずつドラッグできなくて、右クリックすると「名前をつけて画像を保存」てでていたらそれは「画像」です。

 

 

…なんとなく伝わりましたか?

 

 

伝わっているかどうかは分かりませんが、本題いきます!

ここからはHTMLとCSS中心の内容なので、結果だけみたい人はスクロールしてとばしてください。笑

 

まずスタート段階のHTMLのソースが以下の通り↓

―――――――――――――――――――――――――――――――

<div id=”logo”>
  <p id=”top”><span>Re:</span>birth</p>
  <p id=”middle”>INCEPTION HOLDINGS.INC</p>
  <p id=”bottom”><span>Re:</span>verse</p>
</div>

―――――――――――――――――――――――――――――――

 

これでHTMLのほうは完成です!

それぞれ3段になっている文字を3つのパーツ(段落)に分けています。

次にCSSでスタイルを指定していきます。1つずつ説明していくのが大変なんで、ざっくりいきますね。笑

 

―――――――――――――――――――――――――――――――

* {
    padding:0;
    margin:0;
}
#logo {
    width:340px;
    margin:50px;
    font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
    font-weight:600;
    text-align:center;

}
#logo span {
    color:”#C00;
}
#top {
    font-size:72px;
    line-height:70px;
    letter-spacing: 0.06em;
}
#middle {
    background-color:#000;
    color:#FFF;
    font-size:20px;
    font-weight:bold;
    letter-spacing: 0.05em;
}
#bottom {
    font-size:72px;
    line-height:70px;
    letter-spacing: 0.02em;
    transform: rotate(180deg);/* これで文字を180度回転させる */
    -webkit-transform: rotate(180deg);/* webkit系ブラウザ用 */
    -moz-transform: rotate(180deg);/* mozilla系ブラウザ用 */
}

―――――――――――――――――――――――――――――――

 

CSSはこんな感じですね。横幅は340pxにしてます。なんとなくです。

一番のポイントはピンクの部分で、【transform: rotate(180deg);】で文字を180度回転させて「Re:verse」のほうを再現しているところです。

 

 

で、これを実際にブラウザで表示させると…【表示結果はこちらから】

 

 

上手く開けない人がいたら困るので画像も↓

htmlでロゴ

 

 

こんな感じでテキストとスタイルシートだけで再現ができているはずです。

 

画像とは違って拡大しても荒くなることがありません!

iPhoneでおなじみの高解像度のRetinaディスプレイで見ても綺麗!

もちろんテキストなんでコピペもできます!

 

ロゴのフォントは本来「明朝体」を使っているんですが、「ゴシック体」でもデザイン性が損なわれない気がしたのでゴシックにしています。

 

 

 

 

 

ちょっと長くなりましたが、これがどうして重要なのかという話を最後に。

 

2013年10月の段階で「Re:birth」のWebサイトはまだ無いのですが、そろそろサイトの制作をスタートさせようと考えています。

「デザインコンサルティング」を本格的にスタートさせるためにも必須アイテムですからね!

 

 

そこで、どんなサイトのデザインにしようか考えてみたんですがRe:birthのサイトは「画像を使わないサイト」にしてみようかなと。

 

 

0とまではいかないかも知れませんが、極力画像を使わないでシンプルなテキスト(HTML)で構成されたデザインのサイトって作ってみたいと思ったんです。

 

 

そこでまず思いついたことができるかどうか、サイトの上の部分にくるであろう「ロゴ」を使ってやったのが今回の実験でした!

 

 

たぶん完成して公開できる日はまだ先になりそうですが…どう仕上がるかお楽しみに!

それではまた次回!

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアしよう!

この記事はと合わせてこちらもオススメ

筆者について

Webスタッフプロフィール

Webスタッフ

WebスタッフをSNSでフォローするならこちら

ブログ全体の新着記事

No Image

新着情報&お知らせ

緊急事態宣言に伴う休業のお知らせ

No Image

新着情報&お知らせ

グループ内「BeautyFreak」のホームページをリニューアル…

No Image

INCEPTION BLOG

【2016年度】年末年始の営業に関するお知らせ

No Image

INCEPTION BLOG

残り期間わずか!!「サロンコンサル無料モニターキャンペーン」の申…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

No Image

新着情報&お知らせ

残り5社となりました!!「無料コンサルティング」キャンペーン。

INCEPTION BLOG未分類の新着記事

No Image

INCEPTION BLOG

【2016年度】年末年始の営業に関するお知らせ

No Image

INCEPTION BLOG

残り期間わずか!!「サロンコンサル無料モニターキャンペーン」の申…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

INCEPTION BLOG

技術と知識だけじゃダメ!接客もマスターしたアイコンサルタントの時…

INCEPTION BLOG

アイリスト、何歳まで現役を続けられる!?まつ毛エクステの施術者の…

INCEPTION BLOG

新米オーナー様に質問【自分のサロンの3年後の姿を想像できています…

ブログ全体の人気記事

INCEPTION BLOG

普段スーツを着ない僕が、川越で『オーダースーツ』を作った時の話

INCEPTION BLOG

アイリスト、何歳まで現役を続けられる!?まつ毛エクステの施術者の…

INCEPTION BLOG

技術と知識だけじゃダメ!接客もマスターしたアイコンサルタントの時…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

INCEPTION BLOG

浅草-鷲神社『酉の市』で”例のアレ”を初購入!

INCEPTION BLOG

マツエクのプロも愛用!"美容大国"韓国のまつ毛美容液セット「Bi…


▲最上部へ