←prev entry Top next entry→
【自営/Web構築ネタ】イラストで分かりやすいサイト&CSSでスマートフォン対応サイトを作る
iPhoneで見た時の画像

この画像は「ネコトバ。」のサイトというより
私が現在運営しているサイト全体の入り口なのですが…。

ここのショップバナー画像が前表記の「巴李古」のままになっていたので、
新表記の「ぱりこ。-palico.-」に変えまして、

ついでに「ネコトバ。」をばばーんと打ち出した構成に変え、

(イラストも新しく描いたのですよ。
 個人的にショッピングカート押してるぶちねこがお気に入り!)

更には「スマートフォンで見ても快適に見られるように」
大改造いたしました。

実際のサイトはこちらからご覧いただけます。
 ↓
【ぱりこ&ネコトバ。Web】


いやあ…くたびれた…。
 
* * * * *

まずトップのバナー、
いつものイラストに見えるかもしれませんが、
いつもより色々と考えて作りました。実は。


●「ネコトバ。」がどんなものなのか分かりやすくしようと考えた

1.漢字を織り交ぜた

元々「ネコ+コトバ=ネコトバ。」って書いてたのですが、
正直カタカナで「コトバ」って言われても
何のことだか分かりませんよね。

なので「猫(ネコ)+詞(コトバ)=」
という表記に変更しました。

わたしが書いているものは、「言葉」というよりは
「詞」に近いんじゃないかな、と思ったので。

「詩」でもよかったんですけど、
これは「コトバ」って読まないし、
「詩」ってもう少しやわらかくてメルヘンであるべきじゃないか、
みたいな想いがありまして。

私の書く「コトバ」は全然、メルヘンじゃないですからね。


2.筆文字が売りである事を表現した

最初、「猫+筆文字+詞」ってしようかと思ったんですよ。
いちおうネコトバの売りって筆文字じゃないかなーと思ったので。

でもそれ、文字で書くより、
「イラストで表現」した方がいいんじゃない?
イラストレーターを自称してるんだし。

と思ったので、「筆文字」という表記はやめて、
ぶちねこに筆を持ってもらいました。

まあ、元々よく筆を持たせてるんですけどね、ぶちねこには。

ですが、これほどあからさまに
「シンボルとして」持たせたのは初めてかもしれません。


●「ぱりこ。」がネットショップだと分かりやすくしようと考えた

今まで、文字で「ネットショップ」って書いたり、
商品写真をベタベタ貼り付けたバナーを作ってたんですけど、
それでパッと見で「ショップ」って分かるのかな? と。

で、先ほどと同じ話なんですけど、
「イラストレーターなんだから、
イラストで『ショップだ!』って表現しようよ」
と思ったので、

ぶちねこにショッピングカートを持たせました。

これ、我ながらよく出来たなあと思っております。
猫イラストの雑貨を取り扱ってるのは絵でわかるし。

アクセサリー要素はひとつもないけど、
今後は「ネコトバ。」推しでいこうと思ってるので、
アクセサリーはもう中心にしなくていいかなと。


「巴李古・別館」とか「Palico:RE」とかも改装したかったのですが、
時間がなかったのでひとまずそのままです。

100%やりきってから公開しようと思うと、
いつまで経っても公開できませんからね。

「完璧を目指す人は結局何もしない」とはよく言ったものです。


* * * * *

ちなみにスマートフォン・タブレット向けサイト構築に当たって、
以下のサイトがものすごく参考になりました。

【レスポンシブWebデザインの作り方(簡単設定方法)】
【web mobile】

スマートフォン対応サイトを簡単に作ろう、というサイトは
今まで色々と見てきたけど、
なかなか説明されてる通りの表示にならなくて。


★追記メモ

こちらも役立ちました!
【CSSでフッターを画面下部に固定する】 @【Web’Notes】

わたしは「#container」という大枠を作った中に「#body」を入れてたのですが、
[tablet.css]
[style.css]

上記2ファイル内「#body」の「width」は任意の数字に
(わたしは750pxにしました)

[smart.css]
内の「#body」「witdth」は下記のように100%にすると、
大体どの携帯端末でも横幅ぴったりに表示されるようです。

=============================
div#container{
position: relative; /* フッター部の配置用に定義 */
min-height: 100%; /* 縦の表示領域を100% */
}

/* ボディ */
div#body{
width: 100%; /* 横の幅400px */
margin: 10px auto 0; /* 上から10px分余白を取る */
padding-bottom: 150px; /* フッターの高さの分余白を取る */
}
=============================

何をやっても横幅ぴったりに表示されなかったので、できたとき嬉しかった!

* * * * *

表示確認には、
【レスポンシブWebデザインの作り方(簡単設定方法)】で紹介されている
【Responsinator】というサイト?ツール?が非常に役立ちます。

これ、自分のサイトアドレスを入力すると、
各携帯端末(スマートフォン、タブレット)で
どのように表示されるかわかる、というやつなのです。
スゴイ!

ただ、このツール上で表示されたiPhone5Sの画面と、
わたしのiPhone5Sで実際に表示された画面、
ちがいましたけどね…。
まあ、そこは参考程度に、ということで。

自分が持ってない携帯端末で
どういう風に見えるのか?
って今までわからなかったので、
とっても助かりました。

しかしながらまだまだ不十分だと思うので、
もっと見やすいサイトになるよう、がんばるぞ。

* * * * *

本当は今日【ネコトバ。Web】で行った
カテゴリ分けの話とかもしたかったんですが、
時間がないのでまた明日…。

つかれたけど、楽しかったー。

ごきげんよう、さようなら。


* * * * *
ブログ応援クリックして頂けたら嬉しいです。
ブログランキング・にほんブログ村へ
よろしくおねがいします(あわあわ)


*何かご意見ご感想などございましたら。(携帯対応)
【web拍手を送る】
【メールフォーム】※SSL対応

フォームからの返信は基本3〜4日以内に行っていますので、
いつまで経っても返信が来ない!という場合は、
こちらに届いてないか、
私が送ったメールが迷惑メールフォルダに入っている可能性があります。

返事が返って来ない時は、
まず迷惑メールフォルダをチェックしてみて下さいね!


★2通目以降の返信は3日以上かかる場合もあります。





スポンサーサイト
  • 2020.02.24 Monday
  • -
  • 23:58
  • -
  • -
  • by スポンサードリンク

コメント
コメントする








   

PR

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
<< February 2020 >>

profile

categories

selected entries

archives

SNS

links

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM