初めてスマートフォン専用ページを作成する際に知っておきたいポイント

最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。

smartphone.png

ちなみに、今回は基本的にiPhone4を使って確認していますのでご了承ください。

1. スマートフォンに対応させるには?

ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。

PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。

1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。

Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。

例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。

mediaqueries-sample.jpg

Media Queriesについては後で簡単に紹介します。

2つ目のスマートフォン専用ページは、PCのことは気にせずスマートフォンに最適化されたページです。

ヤフーもスマートフォンでアクセスすると、専用ページに移動しますね。

smartphone-yahoo.png

といことでスマートフォン対応にするには2つのパターンがあるわけですが、作成方法には共通点がたくさんあります。

今回は、スマートフォン専用のページを作成する際に注意しておきたいポイントを紹介します。

PCでもスマートフォンでもという方には、Webデザインレシピさんの「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」が非常に参考になりますね。

2. Viewportについて

iPhoneでパソコン用のウェブサイトを見るとなんか小さく見えますよね。

このように小さく見えるのは、iPhoneの画面の横幅がデフォルトで980pxに表示されるようになっているからです。

実際の画面サイズは320pxですが、一般的なウェブサイトの横幅は800px以上が多いので、うまく全体を表示できるよう擬似的に画面サイズが980pxになっています。

あの小さな画面を、横幅980pxにしてサイトを見るとさすがに小さいですよね。

smartphone-view.png

そんなときに活躍するのがViewportです。

Viewportを使うと、画面サイズや拡大に関することを操作することができます。

このように使い、head内に挿入します。各プロパティの内容については以下のとおりです。

width
  • 画面サイズの横幅
  • 初期値は980pxで、200px ~ 10,000px で指定可能
  • 値に「device-width」を指定すると、デバイスの横幅に合わせます(iPhone縦持ちの場合 320px)
  • 「device-width」を指定しているサイトが多いです
height
  • 画面サイズの縦幅
  • 初期値はwidthの値とデバイスのアスペクト比で計算されます
  • widthを指定すると、自動的に計算されますので、特に指定する必要はないと思います
minimum-scale
  • 拡大率の最小値
  • デフォルトは0.25で、0~10.0の間の数値を指定することができます
  • 数値が小さくなるほど遠ざかることができ、一般的に「1」以下の数値が入ります。
  • 100%のリキッドレイアウトだと、それ以上遠ざかることはできないので、あまり意味がありません
maximum-scale
  • 拡大率の最大値
  • デフォルトは1.6で、0~10.0の間の数値を指定することができます
  • 数値が大きくなるほど近づくことができ、一般的に「1」以上の数値が入ります
  • 拡大させたくないときは、「1」を指定します
initial-scale
  • ページが最初に読み込まれた時の拡大率
  • 初期値は「1」で、minimum-scaleとmaximum-scaleの間の値を指定することができます
  • 「1」以外の値を指定しているサイトを見たことがないです
user-scalable
  • 拡大縮小ができるかどうかの設定
  • yes(拡大縮小ができる)、no(拡大縮小ができない)

で、実際に色んなサイトを見ていると、横幅についてはほとんどがwidth=device-width に設定されています。

無駄なくスペースを使いたいので、デバイスによって、それに合った横幅にしているのだと思います。

この場合、「横幅はデバイスに合わす」、「読み込んだときは等倍」、「等倍以上拡大はできない」、という設定になります。

3. 1カラムのリキッドレイアウトで

スマートフォンはパソコンに比べ画面も小さいですので、無駄なく表示させたいものです。

スマートフォンには様々な画面サイズがありますが、どの端末で見ても無駄なく表示されるようにするにはどうすればいいか?

横幅が100%のリキッドレイアウトですね。

リキッドレイアウトとは (liquid layout): - IT用語辞典バイナリ
リキッドレイアウトは、各列の幅をパーセンテージ(%)で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法である。リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるので、多様な環境でユーザビリティが損なわれないWebページを作成することができる。

実際スマートフォン用のサイトを見てみると1カラムのリキッドレイアウトが多いですね。

reqid-layout.jpg

ただ、私もそうですが、あまりリキッドレイアウトを作ったことがない、という方も多いのではないでしょうか?

pやh1といったブロック要素(HTML5からブロック要素という定義はなくなりましたが、イメージしやすいと思うのでここでは使わせていただきます)の場合は、特にwidthを指定しなければ横幅いっぱいに表示されます。

ここで注意したいのはこんな場合です。 ※ 関係ない部分のコードは省略しています。

CSS
h2 {
  width:100%;
  border-left:20px solid red;
  padding-left:20px
}

このようにすると要素全体の幅が、横幅100%(320px) + ボーダー20px + パディング20pxとなり40px分はみ出してしまいます。

width-border-padding.png

横いっぱいに表示したいと、ついついwidth:100%;に設定してしまいがちですが、こんな場合もありますので気をつけましょう。

横いっぱいに表示したいときは、何も指定しないか、width:auto;(初期値)と指定しておきましょう。

4. box-sizingプロパティ

1カラムの場合は、何も指定しないか、width:auto;(初期値)でいいのですが、2カラムなど横並びに2つの要素を並べる場合は、widthをちゃんと指定する必要があります。

実際スマートフォンの場合、画面サイズも小さいですので、2カラムはあまり実用的でないですが、横に並んだメニューなんかだと結構便利ですね。

以下のような2列になったメニューを作るときに、「box-sizing」というプロパティが結構便利です。

sp-menu-sakusei.png

2列ですので幅を50%にするわけですが、横に線やパディングを入れるとその分50%より広くなってしまいます。

入れ子にしてもいいのですが、せっかくですしbox-sizingを使ってみます。

box-sizing.png

ピクセル単位など絶対値で横幅を指定する場合は、あまり必要ないですが、パーセントで指定する場合box-sizingはとても便利です。

横幅を50%と一緒にbox-sizing : border-box ;を指定すると、ボーダーがあろうとパディングがあろうと、要素全体の横幅は50%になります。

まさにIE6ですね。

2列になったメニューを作ってみる

では先ほどのメニューを作ってみます。

box-sizingとCSS3セレクタを使うと、htmlはこんなにシンプルになります。リストを使うべき、というツッコミもあるかもしれませんが。。

HTML

CSSはこんな感じになります。

CSS
#menu a {
  width:50%;
  padding:10px 0;
  background:#eee;
  text-align:center;
  float:left;
  box-sizing: border-box; 
  border-top:1px solid #555;
}
#menu a:nth-child(2n+1){
  border-right:1px solid #555;
}
#menu a:nth-last-child(1),#menu a:nth-last-child(2){
  border-bottom:1px solid #555;
}

1つ目ですべてのリンクの上に線をつけて、2つ目で奇数番目のリンクの右に線をつけて、3つ目で最後の2つのリンクの下に線をつけています。

CSS3セレクタについてはこちらをご参考に
保存版!CSS3セレクタの説明書

5. 幅は5パーセント刻みで指定しよう

例えば、横幅100%のリキッドレイアウトで同じサイズのボックスを横に3つ並べる場合、1つ33.33333・・・パーセントになり割り切れません。

仕方がないので、33%、34%、33%と並べてみます。真ん中は両端にボーダーを付けるので1%多くすることにします。

HTML
CSS
#sample a {
  width:33%;
  padding:10px 0;
  background:#eee;
  text-align:center;
  float:left;
  box-sizing: border-box; 
  border-top:1px solid #555;
  border-bottom:1px solid #555;
}
#sample a:nth-child(3n+2){
  width:34%;
  border-right:1px solid #555;
  border-left:1px solid #555;
}

このようにすれば、合計100%になるのですがブラウザで見てみると、少し隙間ができます。

33-34-33box.png

iPhoneの場合、縦にすると320pxですので、33%だと105.6px、34%だと108.8pxになります。

ですが、小数点以下は切り捨てられて、33%は105px、34%は108pxになると思われます。

ということで、33%(105px) + 34%(108px) + 33%(105px) = 318px となり、2px分スペースができてしまいます。

iPhoneは横で320px、縦で480pxですので、5の倍数にすれば、小数点以下になりません。

androidは機種によって違いますが10の倍数にすれば間違いないです。5の倍数でも大丈夫だと思います。

6. 見出しをCSS3で作ってみる

スマートフォンだとCSS3も自由に使えます。

一般的にスマートフォンはパソコンより回線速度が遅い場合が多いですので、画像はできるだけ使わず、積極的にCSS3を使いましょう。

画像を使わなくても、こんな見出しも作れます。

smartphone-headline.png

テキストシャドウと背景のグラデーションを使うときれいな見出しが作れます。

HTML

見出しサンプル1

見出しサンプル2

まず、上の方のCSSはこんな感じです。

CSS
.headline1 {
  width:auto;
  padding:3px 0 3px 10px;
  color:#fff;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.48, #337fcc), color-stop(0.52, #225588));
  text-shadow:0px -1px 1px #000;
}

次は下の方のCSSです。

CSS
.headline2 {
  width:auto;
  padding:3px 0 3px 10px;
  border-top:1px solid #bbb;
  border-bottom:1px solid #999;
  background:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#fff), to(#bbb));
  text-shadow:1px 1px 1px #fff;
}

テキストシャドウは使いやすいですが、グラデーションはジェネレータを使った方が手っ取り早いかと思います。

7. Media Queriesについて

iPhoneの場合、画面を横にすると横幅が1.5倍になります。

そんなに違うならレイアウトを変えたい、と思うかもしれません。そんなときに役立つのは、Media Queriesです。

Media Queriesを使えば、画面の幅によってCSSを変えることができます。

Media Queries
sp-mediaquer.png

Media Queriesを使ったサイトを紹介しているギャラリーサイトです。4種類の画面サイズでのキャプチャが並べて表示されているので、どのようなものかイメージしやすいと思います。

具体的な使い方はこんな感じになります。

CSS
body {
  color:green;
  font-size:14px;
}
@media screen and (max-width: 480px) {
  body {
    color:blue;
  font-size:12px;
  }
}
@media screen and (max-width: 320px) {
  body {
    color:red;
  }
}

この場合、普段のフォントカラーが「緑」でフォントサイズが「14px」に、画面サイズが480px以下の場合は「青」で「12px」に、320px以下の場合「赤」で「12px」になります。

画面サイズ320px以下の場合のフォントサイズは記述していませんが、480px以下の場合で定義されていますので、320pxの画面だとフォントサイズは12pxとなります。

次のように、画面サイズによって違う外部CSSファイルを適用することもできます。

HTML

画面サイズが320pxの場合、320px以下の場合のCSSだけを読み込むのではなく、480px以下の場合のCSSを読み込んでから、320px以下の場合のCSSを読み込みます。

以下のようにすれば、画面サイズが321px~480pxの場合に適用されますが、その画面サイズに該当しなくても、すべてのCSSファイルを読み込むみたいです。

HTML

ですので、読み込み速度を考えると、外部ファイルを複数用意するより、1つのCSS内に記述した方がいいと思います。

8. 横向きにしたときに文字が大きくならないように

iPhoneで縦から横にしたとき、文字が大きくなります。

それはそれでいいという人もいるかもしれませんが、個人的にはなんか気持ち悪いので、横にしてもフォントサイズが変わらないようにしようと思います。

最初、Media Queriesを使ってフォントサイズを変えていたのですが、そんな面倒なことは必要ありません

HTML
body{
  -webkit-text-size-adjust : none;
}

この1行だけで解決します。

9. 数字がリンクになってしまう

iPhoneだと数字を電話番号だと思い込んで、勝手にリンクになってしまいます。

電話番号をウェブ上に載せるなんて、個人レベルではないのに、勝手に電話番号と認識されたら困ります。

HTML

これで解決です。

10. スマートフォン用ページの表示確認について

サイトを作ったら、正しく表示されるか確認する必要があります。

実機を持っていたらいいのですが、iPhoneもandroidスマートフォンの両方を持っている人は少ないと思います。

そこで、PC上で動くエミュレータが必要となってきます。

説明すると長くなるので、役立つサイトをご紹介します。

Android用エミュレータ

私はiPhoneを持っているので、Android SDKを使って、Androidでの表示を確認しました。

Android SDKのインストールについては、これらのサイトをご参考に。

iPhone用エミュレータ

iPhoneは実機を持っているので、ほとんど使っていないですが、役立ちそうなものを紹介します。

まずが、オンライン上で表示確認できるサイトです。ユーザーエージェントは使っているブラウザになりますので、後で紹介するユーザーエージェントによるリダイレクトは使えません。

CSS3の適応状況なんかも、使っているブラウザに依存します。

これらは手軽ですのでレイアウトの確認なんかに使えます。

Apple公式のシミュレータもあるのですが、Macでないとインストールできません。

11. スマートフォン専用ページにリダイレクトさせる

スマートフォン専用ページを作ったら、スマートフォンでアクセスしてきたユーザーをどうやってスマートフォン専用ページに誘導するかを考える必要があります。

ここでは、リダイレクトさせる方法を紹介します。

ここはiPhone4の実機に加え、androidのエミュレータでも確認しています。

画面サイズで判別する

ちょっと無理やりな感じもしますが、画面サイズによってリダイレクトさせるかどうかを判別する方法です。

js
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "/sp/index.html";
}
-->
</script>

画面サイズが699px以下の場合に、spディレクトリのindex.htmlにリダイレクトされます。

ユーザーエージェントで判別する(javascript)

続いては、javascriptを使ったユーザーエージェントによって判別する方法です。

js
<script language=javascript>
<!--
if ((navigator.userAgent.indexOf('iPhone') > 0)
 || (navigator.userAgent.indexOf('iPod') > 0)
 || (navigator.userAgent.indexOf('Android') > 0)
   ) {
   location.replace("/sp/index.html");
}
-->
</script>
ユーザーエージェントについては、こちらをご参考に。
ユーザーエージェントで判別する(PHP)

今度はPHPバージョンです。コードは一番上に挿入した方がいいと思います。

PHP
<?php
if (strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE
 || strpos($_SERVER['HTTP_USER_AGENT'],'iPod') !== FALSE
 || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: /sp/index.html');
  exit();
}
?>
ユーザーエージェントで判別する(.htaccess)

一番便利そうなのですが、どれを試してもエラーが出てしまった(こちらのサーバーの問題だと思います)ので、便利そうなサイトを紹介します。

ということで、スマートフォン専用サイトにリダイレクトさせる方法を紹介しました。

どれも一長一短ありますし、サーバーによってできない場合もあるので、色々試してみるといいと思います。

12. 最後に

ということで、自分の経験を元にスマートフォン専用ページを作る際に知っておきたいポイントをまとめてみました。

Viewpointなど使い慣れないものもありますが、基本的には1カラムのリキッドレイアウトですので、慣れている人には問題ないかもしれません。

とはいうものの、私の場合は勉強不足な分野が多く、記事を書くのにかなりの時間を費やしました。

今までで一番時間がかかった記事かも知れません。

けど、スマーフォン専用サイトは、PC用と違ってIEを意識しなくてもいいので、CSS3も自由に使えて楽しいです。

初めて作ったということもあり、まだまだ内容的に不十分かもしれませんが、皆さんのお役に立てたなら幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
スマホページは迷惑なので制作の独りよがりはやめてください。
フリックでページ遷移とかもう…呆れますね。
情報量は少ない、縦に長くなりすぎる、画像は拡大できない。
iOSにタップズームがなぜあるのかよく考えてください。
1カラムのページは本当にありがた迷惑。
【2012/02/07 19:44】 | ふcky #- | [edit]
はじめまして

貴重なご意見ありがとうございます。
ただ、スマホ用ページの方が見やすくて好きな人もいると思います。
どちらが多いか分かりませんが。

Yahooを例にすると、個人的にはスマホで見るには
スマホ用ページの方が見やすいと感じてます。
1人のユーザーとしてです。

フリックでのページ変遷は私も嫌いです。
独りよがりと仰る気持ちも何となく分かります。
ただ、スマホページを作ること自体独りよがりというのはちょっと。

ま、スマホ用ページがいいと感じるかは人それぞれですので、
いきなりリダイレクトさせるのはなく、スマホ用ページもありますよ
と知らせるのが親切なのでしょうか。

ありがとうございました。
今後のウェブ制作の参考にさせていただきます。
【2012/02/07 21:11】 | 管理人 #E2ywrYdA | [edit]
はてぶから来ました。

確かに色々な意見がありますが
スマホページの作り方として個人的にすごく為になりました。
【2012/02/09 01:10】 | 阿部翔太 by e-publisher #- | [edit]
阿部翔太 by e-publisher さん

おはようございます。
お役に立ててうれしいです。
励みになります。

人の好みは様々ですので難しいですが、
できるだけたくさんに人に合わせられるようにしたいものです。

またお立ち寄りください~
【2012/02/09 08:04】 | 管理人 #E2ywrYdA | [edit]
ご迷惑をおかけします。。
【2012/04/12 11:48】 | nasunomisoitame #- | [edit]
nasunomisoitameさん

いったいどういうことでしょうか ^ ^;
【2012/04/13 08:04】 | 管理人 #E2ywrYdA | [edit]
いつも拝見させていただいております。
【2012/04/14 19:17】 | nasunomisoitame #- | [edit]
nasunomisoitameさん

ありがとうございます。
これからもよろしくお願いします。
【2012/04/15 13:16】 | 管理人 #E2ywrYdA | [edit]
とても参考になりました!
わからなかった謎が、、、いろいろ解けました。
ありがとうございます!
これからも参考にさせてください。
【2012/07/26 13:43】 | あまぐり #- | [edit]
あまぐりさん

コメントありがとうございます。
お役に立ててうれしいです。
またお立ち寄りください~
【2012/07/26 20:30】 | 管理人 #E2ywrYdA | [edit]
すごくよくまとまっていて参考になりました。
お陰で今からの既存サイトのSP用ページ作成がはかどります。

さて、
11番の項目ですが、
訪問時に一度だけユーザーエージェントで振り分けて
確認を取る方法は如何でしょうか?

PCからだと何も出ないけど、モバイルからのアクセスの際に
「このサイトにはスマートフォン用のサイトがあります。表示しますか?」
と問うものです。


<head>
<script type="text/javascript">
if (document.referrer.indexOf('http://***.net/') == -1 &&
((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0)) {
if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか?')) {
location.href = 'http://***.net/sp/ndex.html';
}
}
</script>
</head>

*私もどっからか拾ってきたコピペ運用ですので、コレを載せて頂いていた方に敬意を示します。
【2012/08/30 14:26】 | D- #SFo5/nok | [edit]
コメントありがとうございます。

いきなりリダイレクトさせるのは乱暴だという方もいますので、
スマートフォン用のページがあることを知らせてあげるは
非常に親切だと思います。
ヘッダーの上で知らせているサイトもよく見かけますね。

この辺はまだまだ分からないことが
多いので今後しっかり勉強したいです。
【2012/08/30 19:26】 | 管理人 #E2ywrYdA | [edit]
こんにちわ
いつも参考にさせていただいてます

項目をみていて、ふと思ったのですが・・・

スマホ対応の際のSEO対策や読み込み速度などについては、どうお考えでしょう?

スマホ用ページとはいえ、検索エンジンからみるとPCページと変わりありませんよね
流入経路もQRコードなどからはマイナーという事を考えると、やはり検索で上位に出なければなりません・・・

まぁ、とりあえず対応させれば顧客は満足、という意見もありますが・・・笑

自分でも試行錯誤しているのですがコレ!といった答えや方法が見いだせていなく・・・
是非ご意見きいてみたいです
(って過去記事であったらスミマセン;)
【2012/12/06 11:53】 | m.clock #Z9F/rjE. | [edit]
m.clock さん

興味深いコメントありがとうございます!

ここ数年、SEOは細かな技術よりも内容だと
言い聞かせていましたのであまり意識していませんでした。

スマホ用ページは、スマホで見たときに
専用ページにリダイレクトさせるかスマホ用ページが
あることを知らせることで誘導することが多いと思います。

で、スマホでいくつか検索したところ、スマホ専用ページが
ヒットすることがありませんでした。

スマホ専用ページはあくまでサブ的なもので
メインはあくまで通常用のページだと
検索エンジンは理解しているからだと思います。
私はそれくらい検索エンジンは賢いものだと考えています。

ですのでSEOについては通常のページで意識すべきであり
スマホ用ページに関しては特に意識する必要はないかと思います。
読み込み速度に関しては速いに越したことはないと思います。

ただ、スマホ用ページしかない場合は話が違ってきますね。
当然意識する必要があります。
ただスマホ用ページは1カラムが多くシンプルですので
見出しなど基本的なことを意識していれば十分かと思います。

今回のご質問、とても勉強になりました。
ありがとうございました。
【2012/12/06 22:43】 | 管理人 #E2ywrYdA | [edit]
とても参考になりました

javascriptのスクリプトコメントアウトですが、
javascriptからコマンドと認識されない為に、

<!--
スクリプト文
-->

となっているところを

<!--
スクリプト文
//-->

とした方がよろしいのではないでしょうか

ありがとうございます.
【2013/10/27 01:37】 | こんにちは #l.rsoaag | [edit]
こんにちは さん

コメントありがとうございます。

確かに仰られているような
方法の方がよさそうですね。

このへん勉強不足でした。。

今後もよろしくお願いします!
【2013/10/27 06:54】 | 管理人 #E2ywrYdA | [edit]
はじめまして

>いきなりリダイレクトさせるのは乱暴だという方もいますので、
スマートフォン用のページがあることを知らせてあげるは
非常に親切だと思います。

これには大賛成です。私もスマートフォン版サイトは見にくいと思う方ですので、いきなりスマートフォン版にリダイレクトされると結構ストレスです。
ましてやスマートフォンからはスマートフォン版しか表示できないようなサイトはさいていかですね。

上記のような配慮がされたサイトがスタンダードになっていくといいと思います。
【2013/10/30 09:36】 | こんにちは #nGdA3O4A | [edit]
こんにちは さん

コメントありがとうございます。

個人的には、
 ・ 最初の訪問でスマホ用もあることを大きく表示
 ・ スマホ用を見た場合、その後はスマホ用サイトを表示
 ・ PC用へのリンクは下の方に乗せておく
というのが親切かなと思います。

今後もよろしくお願いします。
【2013/10/30 23:09】 | 管理人 #E2ywrYdA | [edit]
こんばんは。参考になります。

ひとつ質問したいのですが、

----------------------
この場合、普段のフォントカラーが「緑」でフォントサイズが「14px」に、画面サイズが480px以下の場合は「青」で「12px」に、320px以下の場合「赤」で「14px」になります。

画面サイズ320px以下の場合のフォントサイズは記述していませんが、480px以下の場合で定義されていますので、320pxの画面だとフォントサイズは12pxとなります。
----------------------


上の二つの文は矛盾していると思うのですが、どうでしょうか?
【2014/06/10 00:18】 | そーらん #- | [edit]
そーらん さま

このたびはご指摘ありがとうございます。
仰るように矛盾していますね。。

320px以下の場合のフォントサイズは12pxになります。
ご迷惑をおかけしました。

今後もよろしくお願いします!
【2014/06/10 06:23】 | 管理人 #E2ywrYdA | [edit]
とても参考になりました。助かりました!
【2015/09/05 20:27】 | やまも #- | [edit]
やまも さん

参考になってうれしいです。
今後もよろしくお願いします。
【2015/09/06 06:20】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加