12月27日 通常営業
12月28日 休業
12月29日 休業
12月30日 休業
12月31日 休業
1月1日 休業
1月2日 休業
1月3日 休業
1月4日 休業
1月5日 通常営業
以上となります。
お取引先企業様には大変ご迷惑をお掛けいたしますが、
何卒、よろしくお願いいたします。
11月10日(木)に名古屋のクロッシュブランで『さぶみっと!ヨクスル』という今までになかった交流会にファシリテーターとして運営に関わらせていただきました！ さぶみっと！ヨクスルは、「地域がよくなるためにこんなことをしたい […]]]>
11月10日(木)に名古屋のクロッシュブランで『さぶみっと!ヨクスル』という今までになかった交流会にファシリテーターとして運営に関わらせていただきました！
さぶみっと！ヨクスルは、「地域がよくなるためにこんなことをしたい！」という地元の方に登壇いただき、参加者のみなさんで実現するためのアイデアを出し合う地域密着のアイデアソンイベントです。
『さぶみっと!ヨクスル』は、株式会社イー・エージェンシーの五十嵐さん、甲斐さんが主導になって、全国6カ所を毎月のように飛び回って、地域創生に貢献する新しい交流会の形です。
この交流会にファシリテーターとして参加させていただきました。
＜１人目のプレゼンター＞
限界集落の中で、新規で参入する僕と、地域の人たちと最も仲良くなる方法を知りたい。
高杉 亮さん（株式会社高杉アトリエ）
古民家を買い上げて、食品加工場をつくる準備を進めています。日本に昔からある山村の素晴らしい風景や環境は、これからの時代に主にインバウンド向けに観光資源になり得ると考えています。
村人みんなにプロジェクトの取り組みに賛同してもらうために住民とのコミュニケーションの取り方をみんなで柔軟に考えたいです。
＜２人目のプレゼンター＞
地域の魅力を丁寧にわかりやすく伝えたい。
佐野 智哉さん（加子母LAB）
岐阜県中津川市加子母地域は、林業を背景に培ってきた伝統・文化が残っており、学生と地域を繋げた活動へと発展しています。一方、人口減少により多くのモノゴトを維持していくことへの限界を迎えているとも感じています。地域外とのつながりや、地域の産業がもっと盛り上がるために、サイトをつくる場合どんなコンテンツがいいだろう？などをみんなと考えたいと思います。
＜３人目のプレゼンター＞
豊田市民がとよたの魅力を自ら楽しめるまちにしたい。
深谷 康史さん（豊田市役所 経営戦略室）
豊田市役所では、H27年度から「WE LOVE とよた」を推進するため担当を設けました。１年目はロゴマークの普及、２年目は条例の検討を行っており、条例策定に合わせて、市民がとよたの魅力を自ら楽しめるよう具体的な働きかけをしていきたいと思っています。
どのような働きかけをすると、市民の方が興味を持ち、さらに広がりが
作れるかみなさんと一緒に考えたいです。
プレゼンターの方たちによる課題の説明があり、その後参加者がブレストしたいプレゼンターの周りに集まりチームを作って、
課題の解決に向けて、アイデアを出し合います。
20分という短い時間の中で100個程度アイデアを集めるのが目標です。
ブレストが終わると、参加者同士の交流会となります。
今回の会場は、前回よりも広く明るく料理も美味しかったです！
あいにく名刺をたくさん持ち合わせていなかったので、参加者さんと交流が少なかったですが、
みなさん盛り上がっていたように感じます。
交流会の最後に、ブレストのアイデアのまとめとしてプレゼンターによる発表と今後の展開のお話があります。
「大型バスをチャーターしてバスツアーだ！」などと参加者も燃えていました！
主催者によるまとめがあり、第２回さぶみっと！ヨクスルin名古屋は終了となりました。
ファシリテーターの役割
会議における「進行役」として、常に中立の立場で会議のプロセスに関わりあいながら、会議の目的に沿って進むよう支援をしていきます。つまり会議をコーディネートしていくのです。
会議の進行役・コーディネータとしては「聞き出す」「まとめる」「合意する」を意識して会議を進行します。
引用：すごく簡単なことだろうなぁと思っていましたが、これが意外と難しく、
ブレストでは時間内にアイデアを100個も出さなくちゃいけなくて、
参加者からアイデアが出なくなるという苦しい時間をどうやって乗り切っていくのか、
アイデアにどうやって乗っかって広げていくのか、などブレストの邪魔にならないようにして、
しっかりとアイデアを100個だしてもらう発言や雰囲気作りが重要かと思いました。結局僕たちのチームは、50個くらいのアイデアで終わってしまいましたが、
プレゼンターの方に気に入ったアイデアがあったようで安心しました。そのほか、会場設営、参加者受付、会場後付けもファシリテーターとしての役目です。
次回もファシリテーターとして参加予定です。
]]>
次回はもっとたくさんの人に参加していただけたら嬉しいです。
表示した画像をクリックやタップで大きく表示したいときってありますよね？そんな時に便利なプラグイン『fancy box』を紹介します。fancyboxをレスポンシブECカートの代名詞、aishipRにて使ってみたいと思いま […]]]>
表示した画像をクリックやタップで大きく表示したいときってありますよね？そんな時に便利なプラグイン『fancy box』を紹介します。fancyboxをレスポンシブECカートの代名詞、aishipRにて使ってみたいと思います。
aishipRとは？
aishipRでは、通販サイト運営の方が簡単にECサイトを立ち上げることができ、サポート体制やマニュアルもしっかりとしているので、初心者でも安心してサイト構築と運営ができるASPとなっています。
fancyBoxとは？
aishipR静的ページは、サイト管理＞ページ作成で新規に作成することができるページです。
店舗紹介ページや会社概要ページを作成できます。
上記のようなページ内で画像をクリックしてオーバーレイ表示をしたい時にfancyBoxが活用できます。
上記サイトlicense & downloadよりダウンロードをします。 まず、fancBoxをダウンロードします。フォルダを確認し、cssやjavascriptをaishipRに入力します。オーバーレイ表示したい画像を格納します。最新のjQueryをヘッダーに読み込み、機能パーツにhtmlを静的ページaishipR静的ページにfancyBoxを入れてみる実践方法
概要の説明
画像の確認
下の画像（1920 × 1277）を使いたいと思います。
小さめで表示して、拡大表示されるように設定します。
静的ページの確認
サイト管理＞ページ作成 で新規作成します。
ここでは、
・ページ名：fancyBoxtest
・ページID（URL）：fancybox_test
・レイアウト選択：【テンプレート】汎用
にしました。保存します。
画像管理に画像を格納する
サイト管理＞画像管理 のtestフォルダ内に画像を格納します。
fancyboxの中身を確認する
筆者がダウンロードしたときは、v2.1.5でした。
利用するのは、
source＞jquery.fancybox.css
source＞jquery.fancybox.js
となります。
javascriptとcssをユーザーJSならびにユーザーCSSに入力する
サイト管理＞ユーザーCSSの『共通』の一番下に、jquery.fancybox.cssを挿入します。
また、
サイト管理＞ユーザーJSの一番下に、jquery.fancybox.cssを挿入します。
それぞれを保存してください。
機能パーツ内にhtmlソースコードを入力する
サイト管理＞機能パーツ作成＞新規作成＞テキスト を選択します。
・パーツ名：【test】fancyBoy
・パーツID（クラス名）：t-fancybox
にしました。
画像をオーバーレイ表示するために、機能パーツ内に画像のリンクを設定します。
<ul> <li><a class="fancybox" href="<#サイトURL>img/test/test.jpg"><img src="<#サイトURL>img/test/test.jpg"></a></li> </ul>
a要素に対してクラスfancyboxを適用させます。
画像へのパスは、img/test/となっています。
静的ページに機能パーツと本体を追加する
先ほど作成した静的ページ（ページ名：fancyBoxtest）に機能パーツ（パーツ名：【test】fancyBoy）を入れます。
サイト管理＞ページ作成＞fancyBoxtest 編集
パーツ設置＞機能パーツを追加
追加したら『保存』してください。
続いて、基本設定のhead内挿入に、
<script>
$(function() {
$(document).ready(function() {
$(".fancybox").fancybox();
});
})
</script>
追加したら、『保存』してください。
jQueryの本体の挿入
すでに入っていると思いますが、jQuery本体を確認します。
静的ページにアクセスして、右クリックから『ソースコードを見る』で、
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
上記ソースコードがあれば成功です。
もしない場合は、上記ソースコードを
内に読み込んでください。確認して終わりです。
DEMOページ：
いかがでしたか？
とてもシンプルなjQueryプラグインで、初心者でも簡単に設置することができたと思います。
サーバがCPIの場合、Smart Release（スマートリリース）という機能を使うことができます。これは、極めて便利な機能だったので、簡単に紹介させていただこうと思います。 Smart Releaseとは？ とても簡単 […]]]>
サーバがCPIの場合、Smart Release（スマートリリース）という機能を使うことができます。これは、極めて便利な機能だったので、簡単に紹介させていただこうと思います。
Smart Releaseとは？
とても簡単に説明をさせていただくと、仮サーバから本番サーバに簡単に移設できるということです。
クライアントさんのお仕事をさせていただく場合、本番環境とは別に仮の環境を用意して、
準備が整ったら、本番環境に移設するという手段を取るのが一般的です。
これがとても面倒臭い。。。
FTP内のフォルダをダウンロード、データベースをダウンロードしてドメイン等を書き換え、
本番環境に移設させる作業を行わないといけません。
サイトが正常に稼動するまでドキドキがとまりません。
精神衛生的にも辛い思いをします。
CPIのスマートリリースなら、そんなドキドキ感を味わう間もなく、移設がとっても簡単に行えるんです。
SmartReleaseとはウェブ制作のトラブルを未然に防ぐ次世代サーバーツールです。
ウェブ制作者を悩ませる 問題を解決するべく開発されました。
「制作者を超ラクにする」をコンセプトに、CPI共用レンタルサーバー「シェアードプラン ACE01」に標準装備（無料）されました。
引用：
今までの一般的な工程は、
1.サーバ申し込み
2.テストサイト構築
3.テストサイトにファイルをアップロード
4.テストサイトにて構築
5.定期的に手動でバックアップ
6.テストサイト用のプログラム開発
7.テストサイト検証
8.テストサイト確認
9.ファイルをダウンロード
10.公開用にプログラムを修正
11.納品ファイルをまとめる
12.公開サイトにアップロード
13.公開サイト検証
14.公開サイト確認
とないりますが、スマートリリースの場合は、以下の工程となります。
1.サーバ申し込み
2.テストサイトにフィアルをアップロード
3.テストサイトにて開発
4.自動バックアップ
5.テストサイト検証
6.テストサイト確認
7.「リリース」ボタンクリック
8.公開サイト確認
と工程が8つに短縮されました。
これまでのファイルの納品などの面倒なやりとりもスマートリリースで解決することができます。
また、システム側でファイルを転送するので、これまでのようなファイル納品漏れや、間違ってファイルを削除してしまうことが防げます。
CPIサーバでWordPressをスマートリリースする方法
公開ディレクトリへのFTP接続ができるように用意しておく
CPIサーバ、ユーザーポータルにログインします。 『公開サイト構築』から『公開サイトへファイルをアップロード（FTP）』で、 テストサイトにはすでにWordPressがインストールされています。公開サイトにもWordPressをインストールしておきます。 ユーザーポータルの画面に戻り、スマートリリースボタンを押します。 こちらで公開サイトにテストサイトからデータをすべて移し終わりました。 公開サイトのドメインは、 以上ですべての作業は完了となります。
公開サイト用にFTPを新規作成しておきます。
FTPアカウント新規追加では、
任意でアカウントとパスワード、ログインディレクトリを設定します。
ログインディレクトリは、スマートリリースで設定したフォルダと同じフォルダ名で設定しておいてください。公開サイトにWordPressをインストールする
WordPressを選んで、次の画面へ進んでください。
『公開ディレクトリへのFTP接続ができるように用意しておく』で作成したディレクトリにWordPressをインストールします。
『確認事項に同意の上、インストールをする』ボタンを押して、インストールを完了してください。スマートリリースする
WordPress管理画面へアクセスしドメインを書き換える
http://独自ドメイン.co.jp/
のはずですが、
http://独自ドメイン.co.jp/設定したディレクトリ名
となっています。
こちらを修正して公開となります。
aishipRは、レスポンシブECカートをもった国内唯一のASPです。aishipRにjQueryライブラリである高機能スライダー「slider pro」を入れてみたいと思います。 aishipRの簡単な紹介 aishi […]]]>
aishipRは、レスポンシブECカートをもった国内唯一のASPです。aishipRにjQueryライブラリである高機能スライダー「slider pro」を入れてみたいと思います。
aishipRの簡単な紹介
aishipRでは、通販サイト運営の方が簡単にECサイトを立ち上げることができ、サポート体制やマニュアルもしっかりとしているので、初心者でも安心してサイト構築と運営ができるASPとなっています。
Slider Proとは？
「Slider Pro」はシンプルなスライダーとしても利用可能ですが、
何と言ってもこのスライダー最大の魅力がオプションの多さです。
- レスポンシブ対応
- タッチデバイス対応
- Retina用画像の出し分け対応
- IE8以上で動作
- キャプションのアニメーション表示対応
- 縦カルーセル、横カルーセル対応
- 画面サイズによってレイアウト変更可能
- MITライセンス
などなど。一番ありがたいのは、CSSなどを調整しなくても、オプションの付け替えでほぼ対応できるという点です。
なので、aishipRにバッチリなのです。
今回の制作のスライダーは、レスポンシブ対応で、
３枚の画像から成るサムネイル付きのスライダーにしようと思います。
下の添付を参照してください。
「slider pro」をダウンロードし、ファイルを読み込む
配布元ページの以下の赤枠のリンクよりダウンロードします。
必要なのは、distフォルダのみです。
dist
├ css
│ └ slider-pro.css
└ js
└ jquery.sliderPro.min.js
ダウンロードしたフォルダを展開して、中身を確認したらhead部分に読み込みをします。
※今回はトップページに入れます。
aishipRの管理画面から
サイト管理 ＞ ページ作成 と進み
topの編集を選択します。
「head内挿入」の下部に以下ソースコードを挿入します。
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1行目は、Webフォントを読み込んでいます。Webフォントは、スライダーの左右の矢印に使用しています。
2行目は、jQueryを読み込んでいます。
次に、ダウンロードしたファイルを読み込みますが、
aishipRは画像以外の外部ファイルを標準機能では配置することができません。
ダウンロード済みのcssとjsファイルを
サイト管理 ＞ ユーザーCSS編集 で
slider-pro.cssファイルを追加します。
同じように
サイト管理 ＞ ユーザーJS編集 で
jquery.sliderPro.min.jsファイルを追加します。
追加が終わったら、保存をしておいてください。
最後にjavascriptを追加しますが、
作業工程としては、後の方になりますので、
後ほど紹介いたします。
「機能パーツ」メインスライダーを作成
css、jsファイルの読み込みが終わったら、スライダー画像を用意します。
今回は、ダミーとしますので、
mainv01.png
mainv02.png
mainv03.png
の３種類を横幅1200px 縦幅500pxで用意しました。
用意した画像をaishipR管理画面の
サイト管理 ＞ 画像管理 で
topMain 内に格納します。
次にhtmlファイルを作成します
サイト管理 ＞ 機能パーツ作成 で
新規作成 ＞ テキスト を選択します。
基本設定では、
パーツ名 【TOP】メインスライダー
パーツID（クラス名） p-mainslider
としています。
※カテゴリは後からわかりやすいようにヘッダーを選択するのが良いでしょう。
機能設定（テキスト）で以下のソースを読み込みます。
<div id="wide" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="<#サイトURL>/img/topMain/mainv01.png" />
</div>
<div class="sp-slide">
<img class="sp-image" src="<#サイトURL>/img/topMain/mainv02.png" />
</div>
<div class="sp-slide">
<img class="sp-image" src="<#サイトURL>/img/topMain/mainv03.png" />
</div>
<!--/ sp-slides--></div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="<#サイトURL>/img/topMain/mainv01.png"/>
<img class="sp-thumbnail" src="<#サイトURL>/img/topMain/mainv02.png"/>
<img class="sp-thumbnail" src="<#サイトURL>/img/topMain/mainv03.png"/>
</div>
<!--/ simple--></div>
読み込んだら、保存をしますが、
４行目にある<#サイトURL>というのは、aishipRの独自タグです。rootからのパスを表記する時に利用します。
１２行目までが、メインビジュアルで、それ以降が、サムネイル表示です。
オプションを設定します
htmlソースコードの１行目に指定したid属性に対して、
オプションを設定します。
サイト管理 ＞ ページ作成 と進み
topの編集を選択します。
先ほど挿入した読み込み用ソースコードの下に以下を追加します。
<script type="text/javascript">
$( document ).ready(function( $ ) {
$('#wide').sliderPro({
width: 1200,//横幅
height: 500,//横幅
arrows: true,//左右の矢印
buttons: true,//ナビゲーションボタンを出す
slideDistance:0,//スライド同士の距離
visibleSize: '100%',//前後のスライドを表示
buttons: false,//ナビゲーションボタン
thumbnailWidth: 400,//サムネイルの横幅
thumbnailHeight: 165,//サムネイルの縦幅
breakpoints: {
480: {//表示方法を変えるサイズ
thumbnailWidth: 110,
thumbnailHeight: 40
}
}
});
});
</script>
widthやheightは制作した画像のサイズに直してください。
breakpointsは、480px以下のディスプレイになったら・・・という意味です。
この場合、サムネイルの大きさを小さくしています。
追加後、保存してください。
レイアウトに機能パーツを組み込みます
最後ですが、
トップページに機能パーツ「【TOP】メインスライダー」を組み込みます。
サイト管理 ＞ レイアウト作成 と進み
topの編集を選択します。
パーツ設置に移動し、
ヘッダー内のすでに設置済みの「【TOP】メイン画像」を削除、
「機能パーツを追加」ボタンより「【TOP】メインスライダー」を設置します。
以上で完成となります。
うまく設置できていなかったら
私の経験ですが、設置できていないときは、jsファイルがうまく読み込めていない可能性が非常に高いです。
「slider pro」をダウンロードし、ファイルを読み込む に戻って再びやり直してみてください。
aishipRでサイト運営をお考えの方やすでに運営されている方、制作でお困りではありませんか？
こちらより、ぜひお問い合わせください。
[contact-form-7]
レスポンシブWebデザインを採用しようか迷ってます。というお問い合わせをよくいただきます。 メリットとしては、1ソースで管理ができる、Googleが良いと評価してくれているなどありますが、 デメリットもしっかりと見極めた […]]]>
レスポンシブWebデザインを採用しようか迷ってます。というお問い合わせをよくいただきます。
メリットとしては、1ソースで管理ができる、Googleが良いと評価してくれているなどありますが、
デメリットもしっかりと見極めた上で採用していただけるきっかけになればと思いまとめてみたいと思います。
レスポンシブWebデザインが採用できない３つのパターンについてまとめました。
コンテンツが豊富で明らかに転送量の多さが気になるサイト
情報を多く含んだWebサイト。写真、文字、イラスト素材などあります。
その中でも多くを占めるのが写真素材です。
大きな素材の場合は、画面に表示するのに時間がかかったりします。
現在のdisplayは高解像度でかつ大型化の傾向にあります。
AppleのRetina displayは、通常の画像のピクセルを縦横に２倍にした大きさとなります。
15インチMacBook Pro で横幅2,880px 縦幅1,800px です。
このような大型スクリーンはさも特別のような感覚ですが、
Appleユーザー数はうなぎのぼりに増えていっています。
現在、よく売れているdisplayサイズは、1920×1080のフルHDと呼ばれるサイズです。
パソコンモニターにも積極的に採用され、かなり浸透していると思われます。
一般には、2560×1600なんて大画面もありますし、４K displayと呼ばれるサイズ（4096×2160）も登場しています。
このような大画面モニターに対応させようとすると、素材のサイズが自然と大きくなるのが摂理です。
ブラウザでアクセスしてから、読み込みが行われて表示されるまでに相当な時間がかかってしまうことが想定できます。
レスポンシブWebデザインで作られたWebサイトは、スマートフォンからPCブラウザまで同一の素材を採用するのが通例となっており（一部除外もあります）、
あまりにも大きい素材をスマートフォンなどのモバイル端末で読み込もうとすると、大変な時間がかかってしまい、負荷も増えるばかりです。
外出先などのLTE通信圏内の場合、あっという間に転送量がいっぱいになってしまうという懸念もあります。
こうした事態を招かないためにも、
レスポンシブWebデザインでサイト構築の場合は、素材の重さの吟味をしっかりと行なわなければなりません。
高品質な画像素材が必要なサイト（アート作品やフォトグラファーの個展サイト）
PCのディスプレイサイズでははっきりと人の顔の表情や文字が認識できるのに、
モバイル端末で確認すると、小さすぎて見えない。
このようなケースが少なからずあります。
だったらスマホ表示用に素材を用意して、PC表示用は非表示でよいのでは？と思われる方もいますが、
HTMLに記述したソースは、すべてが読み込み対象となります。
したがって、display:none; で非表示にしたところで意味がないのです。
そうならないためにも素材内のコンテンツは、しっかりと練ることが必要です。
PCで閲覧できるのは当然のことですが、スマートフォンのような小さなdisplayでも認識できるように素材を作らなければなりません。
素材内のコンテンツの吟味を欠かしてはいけないのです。
ピンチイン、ピンチアウト、横スクロールしないと閲覧できないサイト
業務系システムと連携しているWebアプリケーションは、
入れ子状態になっている複雑なテーブルが構築されている場合が多く、
仮にレスポンシブ対応したとしても、
画面が小さすぎるスマホサイトではピンチイン、ピンチアウト、横スクロールする必要がでてきます。
このような場合、レスポンシブWebデザインにするメリットがなくなってしまいます。
以上のことが当てはまるWebサイトの場合は、レスポンシブWebデザインでの構築は見送った方がいいでしょう。
しかし、メリットの方が比率が大きいとお考えの方は、ぜひレスポンシブWebデザインでWebサイトを構築してみましょう。
レスポンシブWebデザインについてもっと知りたいという方はこちらからお問い合わせください。
[contact-form-7]
ついにdayafterdesignsの公式Webサイトをリニューアルいたしました。 開業してすでに２年という月日が流れ、今年の１２月で３期目に突入します。 その間、たくさんの方に巡り会い、たくさん勉強もさせていただきまし […]]]>
ついにdayafterdesignsの公式Webサイトをリニューアルいたしました。
開業してすでに２年という月日が流れ、今年の１２月で３期目に突入します。
その間、たくさんの方に巡り会い、たくさん勉強もさせていただきました。
地元で開催される交流会やセミナー（さぶみっとオフ会、WordFes、WordBenchなど）に参加するようになり、
勉強のつもりが、お仕事をたくさんいただけるようになってきました。
やはりきっかけを与えてくれたのは、
WordPressとレスポンシブWebデザインだったのです。
３年前は、レスポンシブWebデザインを促している媒体や制作会社も少なく、手探り状態でしたが、
Googleが推奨するようなことを発表すると、瞬く間に広がっていきました。
関連記事：レスポンシブWebデザインでモバイルフレンドリーになろう！
そんな中、レスポンシブWebデザインの可能性をもっと引き出そうと考えたのが、
モバイルファーストの考え方でした。
dayafterdesignsの提唱するモバイルファーストとは、
スマートフォンやタブレット端末からサイトを設計していこうとする考え方です。
各メーカーから販売されているAndroid端末やiPhone、iPadの液晶サイズ、すべてに対応し、最適化するのは、
レスポンシブWebデザインの特徴ですが、
スマホ、タブレット、PCブラウザで同一ページにアクセスしたときに、ユーザーエクスペリエンスが高くなるように設計しようとする考え方です。
いくらレスポンシブWebデザインで作ってあるからといって、
レスポンシブならではのデメリットである、画像が小さくて見えない、ファーストビューが適切ではない、ボタンが押しにくいなどであっては、マルチスクリーン対応した意味がありません。
このようなデメリットをメリットに変えるために、モバイルファーストで設計しようと考えています。
ユーザーがショッピングサイトで買い物をするとき、
スマホ、タブレット、PCと同じ情報でないと購買意欲が低下する傾向にあります。
朝通勤時にスマホでチェックし、会社の昼休みにPCで確認し、帰宅後タブレットで購入を決定するというようにシーンに合わせた購入方法が提案できなければ離脱の原因となります。
そのとき、モバイルファーストの考え方で制作した、ECサイトの場合、朝通勤時にスマホでチェックした内容が乏しく、画像も小さすぎて見えない、ボタンが押せない、といったことがあると、購入意欲の低下により機械損失を招く恐れがあります。
いつどこにいても（もちろん通信速度にも配慮）サイトへアクセスしやすくしていくことで、
ユーザーエクスペリエンスを高めることができます。
それが、dayafterdesignsの考えるモバイルファーストの定義です。
リニューアルしたWebサイトはモバイルファーストの考え方で設計し、
液晶画面の小さなスマートフォンでも見やすいように制作しています。
そんな細かい設計ができたのは、WordPressのテンプレートを開発したバズ部さんのおかげでもあります。
ゼロからの開発もよかったのですが、
時間とコストの面からも、避けたかったので、
オープン化されていたバズ部さんのテンプレートを使わせていただいています。
ソースコードを見ると、
ランディングページが作れたり、
コールトゥアクションができたりと便利だったのですが、
そのあたりの機能はまたおいおい使っていけれたらなぁと思います。
そんなこんなで、
まもなく３期目に突入するdayafterdesignsを今後ともよろしくお願いいたします。
Googleは4月21日より、 ユーザーがスマートフォンなどで検索した際に表示されるWebサイトについて、 モバイルフレンドリー（スマホ対応している）かどうかをランキングで左右すると発表いたしました。 これは、御社のWe […]]]>
Googleは4月21日より、
ユーザーがスマートフォンなどで検索した際に表示されるWebサイトについて、
モバイルフレンドリー（スマホ対応している）かどうかをランキングで左右すると発表いたしました。
これは、御社のWebサイトやECサイトがモバイルフレンドリーでなかった場合、
順位を下げますよと警告しているようなものです。
モバイルフレンドリーとはどういうことなのか？
モバイルフレンドリーとは、
前述の通り、「スマホ対応しているWebサイト」のことを指しています。
スマートフォンでWebサイトを閲覧する際、
誰でもすぐに情報を取得したいと思います。
しかし、ピンチインやピンチアウトしないとリンクできない、
または画像が小さすぎて閲覧しにくいなど、
ストレスと受け取られるWebサイトは、
フレンドリーとは言えません。
そこでGoogleでは少しでもストレスフリーなWebサイトを
モバイルフレンドリーと呼んで推奨しています。
- 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
- ズームしなくても判読できるテキストを使用していること
- ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
- 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること
御社の運営するWebサイトやECサイトがモバイルフレンドリーかどうかを調べるには、 レスポンシブデザインで制作しておりますので、 弊社の場合、レスポンシブWebデザインを標準フォーマットにして 物販されている事業者様も多いかと思います。 この通販サイトは、aishipRというASPで制作しております。 やはり問題となってくるのが、スマホ対応の必要性です。 しかし、モバイルフレンドリーとレスポンシブWebデザインを推奨するGoogleにとって、 お問い合わせページよりお問い合わせください！
以下のURLよりアクセスして、Googleが推奨しているかどうかを確認することができます。
弊社Webサイトの場合
問題ありません。 このページはモバイル フレンドリーです。
と表示されました。
制作するようにしております。通販サイト運営のサイトの場合
ECサイト（通販サイト）もしかりです。
通販サイトでは、利益に直結しますので、
モバイルフレンドリーとして認知されることが標準で求められることになります。
弊社で制作させていただきました一部ですが、
レスポンシブECサイトとなっています。
標準でレスポンシブデザインをプラットフォームとしており、
モバイルフレンドリーとして認識されております。レスポンシブデザインでないとモバイルフレンドリーになれないの？
スマホにのみ対応しているケースも存在します。
レスポンシブが良い理由の一つとして、
管理がしやすいのが挙げられます。
また、制作コストも格段に安く済むことができます。
もちろんデメリットも存在します。
あまりにも複雑なシステムが構築されていたり、
レイアウトが複雑すぎるものは、
レスポンシブに向かないという点です。
その他の選択肢が優れているとはとても思えません。レスポンシブWebデザインのお問い合わせ
JimdoやWixという言葉をご存知ですか？ 無料ホームページ制作ツールです。 ブラウザ（インターネットエクスプローラーなど）上で初心者でも簡単に作れてしまうツールです。 無料ですが、 それぞれには有料プランというものが […]]]>
JimdoやWixという言葉をご存知ですか？
無料ホームページ制作ツールです。
ブラウザ（インターネットエクスプローラーなど）上で初心者でも簡単に作れてしまうツールです。
無料ですが、
それぞれには有料プランというものがあります。
Jimdoでは、
独自ドメインを取得すると有料プランになります。
広告非表示にすると有料プランになります。
有料と聞くとびくっとしてしまいますが、
年額10,000円程度と格安です。
そこにドメイン使用料が付加されますが、極めて低コストで
ホームページを持ててしまうのです。
個人商店をこれから開業される方や、
開業資金のやりくりでどうしてもホームページ料金が捻出できない、
個人で簡単にホームページを作りたい方におすすめなのです。
無料でも、
ヘッダー画像も無料でいくつか提供されていますし、
2000種類以上のレイアウトテンプレートもありますし、
スマホに対応していますので、
割と自由度の高いホームページが作れそうです。
高齢の方やお子様でも簡単に作れるの？
というご質問もお受けしますが、
パソコン初心者や電源を入れたことがないという方は、
もっとパソコン自体の勉強をされてからがいいと思いますが、
メールやワードなどで文章を手入力できる方であれば、
簡単にできるとお約束します。
60歳を越えるご高齢の方もチャレンジして、
見事趣味の写真のホームページを立ち上げられた方もいらっしゃると聞いたことがあります。
まさにそういう方にも手が届きやすいのが、
『Jimdo』『Wix』といったホームページ制作ツールです。
もちろん我々のようなWebサイト制作者でも
使用することができます。
お客様のご要望で、
予算があまりない、
自分で更新したいというニーズがあった場合、
『Jimdo』『Wix』を使って制作します。
以下のお客様も同様です。 こういうお客様は、 『Jimdo』『Wix』を使ってみようと思ったけど、 『Jimdo』『Wix』ホームページ制作支援 2時間ほどでホームページは完成できます。 もちろんこちらで全て制作させて頂くことも可能です。
普通にランディングページを作ろうと思うとかなりの金額が掛かってきてしまいますが、
『Jimdo』『Wix』を使って制作すると半額程に押さえられるのです。
本当はホームページを使ってやりたいことがたくさんあったりします。
私たちは、こういうお客様にご満足していただくために、
『Jimdo』『Wix』を使ったセミナーを定期的に開催していきます。
何から準備したらいいのか分からない。
自分で作ってみたけど、プロの評価も欲しい。
もっと集客したい。
などなど、自分だけではどうしても解決できない問題を解決させて頂きます。
お一人様 2時間 7,000円
5名様以上でお一人様 2時間 5,000円
その後もSKYPEやお電話にて完成するまでとことんサポートさせて頂きます。
あらかじめパソコンのメールアドレスをお持ちでない方は、取得してからご参加ください。
会場費・出張費・消費税は別途必要となります。
会場費の目安としては、1時間あたり3,000円程度です。ご参加される人数で割って頂けます。
Wi-Fiが利用できるカフェで開催する場合は、お食事代を別途ご用意ください。
詳しくはお問い合わせください。
それは、明度調整です。
環境光による明るさ調整の実現
レスポンシブWebデザインは、
1ソースでマルチデバイスに対応するという一面を持っています。
すると、
デスクトップPCでサイトを閲覧する場合、
ノートPCでサイトを閲覧する場合、
タブレットでサイトを閲覧する場合、
スマホでサイトを閲覧する場合と
デバイスによって、シーンが異なると思います。
例えば、スマホで閲覧するシーンと言えば、
通勤中や公園などの屋外が想定されます。
PCサイトで閲覧するシーンは、
オフィスや家庭ですよね。
その場合の環境光を
html5で決定することができるんです！！
例えば、眩しい晴天下で画面を観ると、
照り返しやらなんやらで非常に見えにくくなることが多いんです。
最近のスマホには、環境光を自動的に測定して、
スクリーン画面を明るくしたり暗くしたり自動で行ってくれる機種も発売されています。
しかし、まだまだ対応機種は多くないのが事実です。
そこで、
Ambient Light Events API
HTML5を使ってブラウザから各種センサーやカメラなどの
ハードウェアが持つ機能にアクセスするための仕様、
デバイス APIのひとつであるAmbient Light Eventsがあります。
ここでは技術的な説明は致しませんが、
もし気になった方がいらっしゃいましたら、
お問い合わせください。