タグ別アーカイブ: レイアウト

スマホサイト作成時に気を付けたい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/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

デザインは重要か?

サイトにデザイン性は必要?
━━━━━━━━━━━━━━
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対策をしながら文章を作り上げていく作業が恐らく一番の難関になるのではないでしょうか?

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

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