タグ別アーカイブ: デザイン

四角枠の角を丸くする方法

たった10分でできるCSSの裏ワザ③

【四角の枠線を角丸にする方法】

●四方全て角丸にする方法
※以下の青枠のことを説明します。

四角枠の角を丸くする方法

四角枠の角を丸くする方法。超~簡単なので皆さんコピペで使ってね!

border-radius: 20px;
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

↑ たったこれだけ!背景画像でわざわざ角丸などにする必要ありません!


※ブラウザで分けたいとき※

div.kadomaru {
-moz-border-radius: 20px;    /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
border-radius: 20px;         /* CSS3 */

ついでに…
●上側の角だけを丸くする方法

div.kadomaru {
/* ▼CSS3 */
border-top-left-radius: 20px;  /* 左上 */
border-top-right-radius: 20px; /* 右上 */

/* ▼Safari,Chrome */
-webkit-border-top-left-radius: 20px;  /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */

/* ▼Firefox */
-moz-border-radius-topleft: 20px;  /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */

/* ▼共通装飾 */
border: 3px green solid;     /* 枠線の装飾 */
background-color: #ccffcc;   /* 背景色 */
}

 

すっごい簡単じゃないですか?ね?ね?(笑)

ちょっとしたことを知っているだけで、ブラウザの表示が

ものすごく軽量化されるのです。

軽量化される→Googleの評価があがるということなので、
是非とも参考にしてみてください^^

ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪

(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光を考えている方は絶対必見!屋根よりもカーポートに設置!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

人を惹き付けるサイトとは?

人を惹き付けるサイトとは?

——MENU——————–————————————–

  1. トップページの構造
  2. コンテンツの配置
  3. フォントと文字の大きさ
  4. 見やすさ・わかりやすさ
  5. 全体的なバランス

———————————————————————

①トップページの構造


過去ブログにも記載しましたが、パッと見た瞬間に
ユーザーは何のサイトなのかを分析します。

・興味がない=直帰率100%
・ちょっと興味がある=30秒ほどTOPページだけさら~とみる程度
・とても興味がある=いろいろなページを開いてくれる

大抵は上記の3つに分別されます。
それでも「とても興味がある」とはいえ、平均3分~5分程度で
普通のサイトは見終えてしまいます。

そのため、どんなにフォトショやイラレを使えて見栄えを良くしても
ユーザー側からして興味のないサイトは数秒で離脱してしまうのです。

②コンテンツの配置

興味がないユーザーは、そもそも見当違いのサイトを検索しているのでしょうから、
ここでは省きます。

「ちょっと興味がある」という、まさにこのユーザーをいかにサイトから離脱させないか。
そこが今回のテーマです。
もう少し詳しくかりやすく説明すると、コンテンツの配置に気をつけることです。

例えば、ファッションサイトなどでは、ジャンルごとにカテゴリ分けされてますが、
季節のテーマに沿った「スペシャルイベント開催!」「夏の鉄板アイテム集」など
「おや?」っと思うキャッチフレーズと画像が大きくトップにあったらどうでしょう?

人を惹き付けるデザイン&コンテンツ

人を惹き付けるサイトとは?

自分が興味があるキャッチコピーや画像があると、思わずクリックしてしまいそうですよね。

そして、今や主流となあった「このページを見た人は、こんなページも見ています」
似たような商品誘導をすることで、ユーザーの好きなジャンルとマッチングし
滞在時間が少しでも長くなるわけです。

③フォントと文字の大きさ

上記でファッションを取り上げましたが、数知れぬサイトの中には年配の方が
見るようなサイトも存在します。
そんな時に役立つのが「テキストの大きさの選択」です。

※このようなサイトを一度はみたことがあるはずです。

これは、そのようなユーザーにも適応します。ということです。
ターゲット層を選ばない・幅広いサイトで大変重宝されるツールですね。

④見やすさ・わかりやすさ

サイトに訪れるユーザーの半分以上は、その分野の知識が無い人。と思いましょう。
知識があれば検索する必要ありませんもんね?
素人・未経験・初心者・このようなユーザーがわかるような言葉・図・グラフなどを
用いて、表現することで興味が具現化し、顧客になる可能性tが高くなります。

⑤全体的なバランス

奇抜なサイトは、そのジャンルのユーザーからは支持されますが、
一般的にはごく普通の見やすいサイトが好まれる傾向にあります。
全体的名バランスを考慮し、ユーザーがサイト内で迷子になることの
ないよう、誘導していくテクニックを覚えられたら最高でしょう。

心を込めて、ユーザー視線で作るサイトには、必ず意味があります。
制作者の細かい「想い」が詰まっているのです。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■足の痛みや歩行時の痛み、外反母趾・スポーツ障害の方は入谷式へ!
http://ashikara-labo.com/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

スマホサイト作成時に気を付けたい5つの法則

いよいよ、スマホ2台持ちなんて方も珍しくなくなってきましたね。
スマホ&タブレット持ち歩きという方も、とても多いです。

タブレットとは若干話が反れますが、今回はスマホ用ページを
作る際に、これだけは気を付けたい5つの法則を紹介します。

——–MENU—————————————————-
①実機できちrんと表示されているのか?
②キャリア別に不具合はないか?
③スマホの読み込み速度はどのくらいなのか?
④エラーページならないか?
⑤PCと重複コンテンツになってはいないか?
—————————————————————-

①実機できちんと表示されているのか?

・作り手は私も含め、作るのに魂を注ぐが故、実機で正確に表示されていると
思い込んでいる場合が多い。(誤字脱字含め)

・少なくても知人のスマホを借りて数種類のキャリアでの表示を確認するべきである
特にアンドロイドとiphoneでは全く見え方が違かった!という声も少なくない。
Firefoxのアドオンにある「FireMobileSimulator」も便利ツールの一つではあるが
当然PC上での確認になる為、実機で表示されるものと同じではないということを
念頭におくべきである。

とは言っても、高性能なアドオンなので一応紹介↓
http://firemobilesimulator.org/

②キャリア別に不具合はないか?
・①に続いて関連する項目になるが、注意したいのはスマホはリスト生成の為、
一つでもズレが生じると、それ以降全てのコンテンツが崩れて表示される羽目になる。

・テキストサイズ、改行箇所、画像の縦横の比率、バナー広告などがどのように表示され ているのかは黙示確認が必 須である。

③スマホの読み込み速度はどのくらいなのか?
・スマホのLTEが導入され、速度がガラケーよりも断然早くなったといっても、あくまでも  携帯。速度が光回線などよりも遅いのは否めない。
しかもどの携帯会社もLTEの利用限度を定めており、一定の容量に達すると、恐ろしい ほど回線速度が落ちるという難点がある。

・この場合、気を付けたいのが画像の容量サイズに尽きるであろう。
テキストはどんなに長文を書いても、大した容量にはならないが、画像だらけのスマホ  サイトなどはアナリティクスなどで速度を確認し、調整することが必要だ。

④エラーページならないか?
・時々PCサイトでも404ページが表示される場合があるが、スマホの場合はその倍くらい
404表示が多いと予測し、十分にリンクチェックをした方が良い。
リンク切れがマイナス評価になることは、もうご存知であろう。

⑤PCと重複コンテンツになってはいないか?
・これが今回、最大の難関テーマである。
スマホサイトをどう構築するか、で、重複コンテンツか否かが決まるのである。

仮に、スマホで当サイトの「http://webcreat.biz/」を開いた時に

(例1)
.htaccessでキャリア自動判別をするのか?

(例2)
サブドメインで、「http://s.webcreat.biz/」とするのか?

(例3)
ディレクトリ内に収め「「http://webcreat.biz/smp」とさせるのか?

(例4)
レスポンシブ表示でキャリアを自動判別し表示の仕方を自動で変更するのか?

表示の仕方は多々ある、どれを選択するのかで、スマホでのランキングが大幅に変動することとなる。

個人的には、(例4)のレスポンシブ表示であれば、同一ファイルのみで、見せ方が異なるだけなので一番オススメしたいが、これには技術と経験値がものをいう。

昔は(例1)の.htaccessでキャリア自動判別がダントツに多かったと言える。
しかし、これも今では少し時代遅れになりつつある。
(ペナルティではないので、続けていても問題はない)

(例2)のサブドメインは個人的にオススメはしない。
サブドメイン=別サイトとみなされる為、本来の公式PCページの丸バクリと
なるのではないか?と疑問である。
yahooなどではコンテンツ別にサブドメインを作っているが、あれはどういう仕組みに
なっているのか、模索中。

(例3)のディレクトリ内に収める←つまりは(例1)と同様の手段になるであろう。

そうなると、やはり今のところ(例1)or(例4)が妥当としか言わざる得ない。
(例1)の場合はPCを全く同じテキスト・コンテンツを用いるのではなく
スマホ独自のコンテンツなどに切り替えることで重複コンテンツでは
ないようにアピールするのが良いだろう。

増え続けるデバイスキャリアについていけるのか!?

スマホサイトを制作する際に気を付けたいこと

スマホサイトのデザイン含め制作時に気をつけなくてはいけないことは
山ほどある。これを一つ一つクリアしていけば、きっと素晴らしいサイトが完成するはずです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■足の痛みや歩行時の痛み、外反母趾・スポーツ障害の方は入谷式へ!
http://ashikara-labo.com/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

負けるな自分!

負けるな自分!

くじけそうになっても、心が折れそうになっても、WEBが好き…

 

 

10年前に人生においてお世話になった方から言われた言葉です。

 

【良いことは他人のおかげ。

悪いことは自分のせい】

 

 

ここのところ、うまいこと仕事ができなくなってまして、完全にスランプっていうやつです。

ちょっと前の私だったら、何かを思いついたら、どこでも手帳を開いてデザインのレイアウト・ロゴ・キャッチコピーなどをメモして、自宅ですぐ実践していたはずなのに…

5月の手帳は寂しい空白…。

 

それでもWEBが好き。

デザインが好き。

ものを形に変えていく瞬間が楽しくてたまらない。

 

なのに今、頭に何も浮かばなくなっている自分がすごく悔しい。

涙がでちゃいます。

 

5月病なのでしょうか!?(汗)

 

やる気満々で漲るパワー全開の私に早く戻れるよう、自己管理しっかりします!!

今回は何も情報を提供できずにごめんなさい。

ひとりつぶやきタイムでした。。。

 

 

デザインは重要か?

サイトにデザイン性は必要?
━━━━━━━━━━━━━━
http://webcreat.biz
━━━━━━━━━━━━━━

いつもメルマガをご愛読いただきありがとうございます。
今回は、「デザインは重要か?」について、ご紹介いたします!

————————————————————————
◆◆ 今回の目次 ◆◆
1.スタイリッシュなデザイン
2.何年前ですか?的なデザイン
3.目を引くデザイン
————————————————————————

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【1】『スタイリッシュなデザイン』
――――――――――――――――――――――――――――――――――――
IT業界が発展するに伴い、デザインも相当見違えるようになってきました。
ドロップシャドウ(影)を使うか使わないかだけでも見栄えは全く違います。
タブにグラデーションや、1pxのラインを入れるだけでも相当変わります。

デザインはその1pxが命と言っても過言ではないほど、洗練されたものとなってきました。

・見やすい
・使いやすい
・新鮮さを感じる

など、上記の要素はもうあって当たり前のものとなってきたのです。
さぁ、あなたのサイトはいかがですか?

細部までこだわりを持って制作してますか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【2】『何年前ですか?的なデザイン』
――――――――――――――――――――――――――――――――――――
ありますね、そういうサイト。
しかも更新すらされてないのではないか?というサイト。
SEOでは一ヶ月に1回は更新を推奨してます。
しかし、ドメインの取得年数の方が価値が高いのでしょうか?
古く更新もされてないサイトが上位表示されていることもよくあります。

せっかく上位表示されているのなら、画像だけでも更新した方が良いです。

少しずつでも時代に合わせたデザイン性に変えていくことがサイトを育てる」ことだと思います。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【3】『目を引くデザイン』
――――――――――――――――――――――――――――――――――――
好みもありますが、上記でも述べた

・見やすい
 ・使いやすい
・新鮮さを感じる

まさに目を引くデザインなのです。
画像がばかりがダラダラとあるだけのサイト、
今、どこのページを見ているのかもわからないようなサイトは
ユーザー目線のデザインではありません。

多少素人っぽくても、ユーザー目線で考えれば、自ずと答えがみえてきます。

それでも答えの糸口が見つけられないという方は、ぜひウゥブクリエイトまでご相談ください。画像・デザインのみのご注文もお受けしております。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【PR】
■オフィシャルサイト
http://webcreat.biz
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ウェブクリエイトとの打ち合わせ

打合せの前に知っておくべき知識【1】

(1)色の3原色。

たくさんのいろを配色した多彩なサイトPOPサイトもありますが、

色を増やせば増やすほどにレイアウトは難しくなります。

比率としては意見が分かれるところですが、私の場合は

70%:20%:10%で分けてます。

お洋服でも同じでごちゃごちゃした配色はみづらい傾向があります。

原色をつかうにせよ、3食程度が好ましいです。

(2)ワイヤーフレームの利用

準備するものは紙とペンのみです。

目の前にある紙にサイトの構成を書き足していきましょう。

ありがちなのは

ナビゲーションと呼ばれるメニュー一覧(縦・横・右・左などは好み)

・HOME

・商品案内

・価格表

・よくある質問

・会社概要

そして、コンテンツとしてバナー(画像)でブログにリンクしたり

他社共同会社にリンク設置をします

。アイキャッチとよばれるメイン画像もどこに入れたいかなど、

ご自身の希望をザックリ書きとめておくと、打合せの際に非常に話がスムーズです。

(3)コンテンツ内容

こちらも、ありがちなのは

・過去の事例

・スタッフブログ

・豆知識

・その業界ならではのハウツー

などです。

サイトを閲覧しにくるユーザーは自分に必要な情報がないサイトには滞在しません。

なるべく多くの説明分や見やすさを追及し、長時間滞在してくれるような

「意味のあるサイト」作りが大切です。

(4)デザインセンス

よほどの価値のあるサイトでなければ、デザインセンスが悪いサイトにはたいざいしません。(読みづらい・見づらい)

ワイヤーフレームとも内容がかぶりますが、本能的に見やすいサイトの原理というのは決まっているのです。(※後日、詳細を公開)

・会社の方針やコピーライトカラーなどで統一し、すっきり見せる

・装飾を使いゴージャス感をだす

・淡い配色で安らげるサイトにする

・モノトーンやダークな色でインパクトにつなげる

など、それぞれ自社にあったデザインにしなくてはいけません。

幼稚園のホームページがダークな配色ではおかしいし、

病院のサイトがキラキラした女の子的なデザインでもおかしいですよね。

これだけホームページが普及する中でデザインは重要なキーポイントになりつつあります。

(5)文章~テキスト~

人が読みたくなる文章を書くのは一般人には至難の業です。

(私も、文章は得意じゃないので、読みにくかったらすみません)

但し、文章には書き出しから終わりまでの流れがあります。

順番さえ間違えなければ、ある程度の文章にはなるはずです。

また、本屋さんにいくと膨大な数のテキストがあるので、参考にするのも手ですね。

テキストを書く際に気をつけて欲しいのはSEO対策です。

SEO対策をしながら文章を作り上げていく作業が恐らく一番の難関になるのではないでしょうか?

色のバランス、レイアウト、コンテンツ、デザイン、文章と、あらゆるジャンルに対応致します。

ホームページ制作は川口市のウェブクリエイトにお任せ下さいね♪