自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design
 

twitterヘッダー画像の制作のコツ

2015年5月におくればせながら「twitterのヘッダー画像の設定をしよう」を書いたところ、Hotentryに次ぐアクセス数があります。そういえば、ヘッダー画像の作成サイズを書いたブログ記事は多くあれど、作成のコツを書いている記事はあまりありませんね。わたしも手作業で、確認をしていったものです。ぜひ素敵なヘッダー画像を作っていただきたく、第二弾として今回のエントリーです。

 

SoyInquiryのレスポンシブ案

「モバイルフレンドリー」「スマホ対応」。

Web業界のリーディングカンパニー・Google社が推奨しているサイトデザインです。現在スマホ対応させる方法としては、1.javascriptでスマホ用サイトに自動遷移させる、2.cssでブラウザ幅にフィットさせる、主にこの2つが使われています。タブレット、ミニタブというPCとスマホの中間サイズも普及してきて、縦横切り替えなどいろいろな閲覧の仕方が考えられるので、ぜひモバイルフレンドリーサイトを持ちましょう!


今回はSoyCMSで「お問い合わせフォーム」に使用するプラグイン「SoyInquiry」のスマホ対応について書きたいと思います。

 

twitterのヘッダー画像の設定をしよう

サービス業の広報にtwitter、Facebook、Google+、InstagramなどのSNS(ソーシャルネットワーキングサービス)を使用するのは、もはや珍しいことではありません。

ホームページを見る場合、閲覧者は検索してアクセスをするという「主体的動機」を経て至るのに対して、SNSは一度フォローしておけば閲覧者の画面に自動的に投稿が流れ込むという「受動的動機」でアピールすることが可能です。

またホームページがオフィシャルな会社の顔としての役割を果たす広告媒体だとすると、SNSは会社の一員である運用者が個人の顔を出しつつ日常の出来事を投稿するフランクなものという共通認識がユーザー間に出来ています。

 

モバイルフレンドリーが検索優位に!

2014/11/27に書いたエントリー『モバイルフレンドリーとは?』で訳しました

ぶっちゃけ『モバイルフレンドリー』かどうかをサイト評価にも反映させようって実験もしてるからお楽しみにwwwwww

が、いよいよ現実になります。


このブログに「モバイルフレンドリー」で検索してこられる方が年末年始に急に増えました。今もっともWebで注目度の高いキーワード「モバイルフレンドリー」。それについては2014/11/27のエントリーをご覧いただくことといたしまして、今回アナウンスされたその続報について今回は取り上げます。

 

ネットショップもレスポンシブで

今ネットショップサイトを制作しています。


クライアントへの提案に際して、いろいろと昨今のネット環境や一般的ネットショッピングサイトの状況を知らべ、今後の展開の考察した上でレスポンシブデザインのショッピングサイトを作る方向で提案するつもりでした。

しかし、レスポンシブデザインの困ったところは、基本的に全体的にスッキリとしたデザインになってしまうところです。カラム組みに制約があるのと、モバイル向けに画像やバナーを極力使用しないで作るためです。ボリューム感で購買意欲を煽る方向性ではなく、質感で魅せる方向性で作ります。


それなりに説得材料を揃えて提案に伺ったところ、なんとクライアント側から「ごちゃごちゃしたサイトではなく、スッキリしていてスマホでも買いやすいサイトがいい」とおっしゃっていただきました。

思うところがあったので制作日記として書き留めておくとともに、これからネットショップサイトを立ち上げたりリニューアルを検討されている方の参考になればと思います。

 

appleサイトのレスポンシブ化

2014年に書いたブログ記事で、もっともアクセスをいただいているのが「2014年大手サイト制作幅」というエントリーです。


わたし自身制作しているなかで知りたかったので書いたものですが、その時感じたのは、「日本の大手企業はレスポンシブ切り替えを様子見している」ということでした。わたしはレスポンシブデザインで基本組んでいるので、この動きは少々気になるところでした。


ところが上記の記事をアップして間もなく、取り上げた1社であるappleのサイトがレスポンシブにリニューアルしました。それ以外のサイトは現在もすべて変更はありません。ということで、今回はそのappleのレスポンシブサイトの主にmediaクエリについて覗いてみます。

 

モバイルフレンドリーとは?

「モバイルファースト」の次は「モバイルフレンドリー」がどうやらキーワードになりそうな2014年後半のインターネット。


夏に発表された「Flashコンテンツ」(Adobe社製Flashというソフトで生成した動的ファイル)使用のサイトの警告を皮切りに、インターネットのリーディングカンパニーであるGoogle社は、「モバイルフレンドリー」対応サイトにはラベルをつけてモバイル対応が出来ていることを明示するということを、そのWeb開発者向けオフィシャルブログ「webmastercentral.blog」にて2014年11月18日に発表しました。


今回はモバイルフレンドリーとはなにか、Google検索はどうなるのか、サイト評価を下げないために何をすべきかを書いてみたいと思います。

 

レスポンシブの基本のき

今さらですが、この「レスポンシブデザイン」、Webサイトとして実験的な段階から、検証的にでも導入する企業が増えてきたので、触れたいと思います。その意味は数多くより詳しく説明してくれているサイトがすでに多くありますのでそちらにお任せすることに!


当サイトもリニューアルとともにレスポンシブに変えました。基本的に留意することは大きくふたつです。

1.デバイス(ネットを閲覧する機器)の幅を念頭に置いてデザインやカラム割をする。

2.画像はスマートフォンでもPCブラウザでも見て問題ないものを採用する。


それでは詳しく考えていきましょう。

 

レスポンシブでの画像やボタンについて

PCサイズからスマホサイズまで、様々なデバイスのブラウザ幅にあわせて、閲覧しやすいレイアウトをcssでコントロールしていく手法「レスポンシブデザイン」。googleのモバイルフレンドリー政策によってじわりじわりと広まりつつあります。しかしWebを巡回していると、特にWordpressのテンプレートを使用しているページでは、レスポンシブテンプレートに切り替えただけというケースがまま見られます。ネットショップでなければモバイルフレンドリー政策に焦る必要はありません。ゆっくり知識を身に着けてリニューアルの準備を整えましょう!今回は画像やボタンについて書きます!

ここは2ページ中2ページ目です

<< 1 2 >>
Hotentry
Blog Post
クリックして上に戻る