スマートフォンサイト制作

軽量化・高速化プラン

こんなことにお困りではないでしょうか?

  • 作ったサイトが重い
  • 表示に時間が掛かる
  • 軽量化、高速化のやり方が分からない
  • 取り組む時間がない

スマートフォンユーザーが増加の一途をたどる現在、当然のことながらスマートフォン対応サイトも増加していきます。今まではサイトを作るだけでも良かったのですが、今後は内容の充実のほかに、“表示速度”への対応も求められます。表示が遅い、動きが重いとユーザーにストレスを与え、離脱の原因となります。そのため、ランディングページやECサイトのような、結果に直結するサイトほど軽量化・高速化の重要度は増します。

自社で対策を練ろうと思っても、基本的な考え方はもちろん、手法、手順、評価方法などはまったく確立されていないため、どこから手を付ければ良いのか、どの業者を選べば良いのかすら分からないのではないでしょうか?
画像一つを例にとっても、データそのものを軽くするのか、表示方法を変えるのか、表示の順番を変えるのか、何を犠牲にして何を残すのかなど、方法は多岐にわたり、その都度、サイトの課題と達成目標に合わせて手法と中身を検討しながら軽量化・高速化を実現しなければいけません。

このように、軽量化・高速化への対応は多くの手間と時間が必要ですが、同時に多くの実験と効果検証に基づくノウハウの構築があってこそ実現が可能となるため、TOUCH&SLIDEでは専門チームが対策にあたり、サイトの課題にお応えしています。

  • 「何をどうすれば良いか分からない」
  • 「表示が遅いような気がする」

というように、軽量化・高速化についての漠然とした心配や、何も分からない場合であっても丸投げしていただければ、サイトの検証結果、具体的な対応策、予想される表示スピードなどを提示いたしますので、表示速度でお困りの際はぜひご相談ください。

軽量化・高速化プランの注意事項

本プランは高速化を行うサイトの内容により、可能なことと不可能なことがございます。

例えば画像を減らす、画質を落として容量を減らす、というような施策は、ショップサイトなど画像が重要なサイトでは適用が難しいことが考えられます。
また、サイトに組み込まれているシステム等により施策が行えない場合もございます。

そのため、高速化を行う際にはサイトの仕様や事情を把握し、どのような施策が適切かひとつひとつ検討のうえ、可能な施策をご提案させていただきます。

1. 高速化の余地がある場合

  • 画像が多く使われている
  • Ratinaディスプレイへの対応は必要ない
  • 組み込まれているシステムによるコーディングの制限がない
  • デザインの変更を検討できる
  • コンテンツの変更を検討できる

コーポレートサイトやプロモーションサイトなどが該当します。
このような場合は、ほぼ全ての施策が可能なため、高速化が見込めます。

2. 高速化の余地はあるが、できない場合

  • 画像を綺麗に見せたい
  • 組み込まれているシステムにより、コーディングを変更できない
  • デザインの変更はできない
  • コンテンツの変更はできない

楽天RMSやカラーミーといったASP系のショッピングサイトやその他システムが組み込まれているサイトなどが該当します。
このような場合は、実行できる施策が少ないため、高速化が見込めません。

3. 高速化の余地がない場合

  • 画像が少なくテキストベースのサイト
  • 既に高速化のための施策が十分にされているサイト

当社では、無駄なものを最適化することによって表示速度の高速化を実現いたします。
そのため、元から無駄なものが少ないテキストベースのサイトなど、極シンプルなサイトは高速化できる余地がありません。

お見積りにつきまして

ご依頼のサイトが(1)に該当する場合は対応できる施策数が多いため、高速化の効果が出やすいものになりますが、その分、期間と料金を多くいただくものになります。しかし、全ての施策を必ずしも行なう必要はないため、予算に合わせて提案させていただきます。

(2)に該当する場合は組み込まれているシステムやサイトの目的による部分が多いため、そういった事情を考慮したうえで可能な提案をさせていただきます。

(3)に該当する場合は申し訳ございませんが高速化のお約束ができないため、お受けできない可能性がございます。
それぞれのサイトの目的・内容・仕様によりお見積もり内容が変動いたしますので、予めご了承ください。

高速化/軽量化対策後のデータ一例

高速化施策前
ファーストビュー セカンドビュー
読み込み時間 7.55 秒 2.65 秒
レンダリング開始時間 5.74 秒 0.94 秒
リクエスト総数 27 リクエスト 4 リクエスト
バイト総数 142538 Bytes 24533 Bytess
Javascript バイト総数 80246 Bytes 0 Bytes
html バイト総数 24218 Bytes 24159 Bytes
CSS バイト総数 15809 Bytes 0 Bytes
image バイト総数 22265 Bytes 374 Bytes
高速化施策後
ファーストビュー セカンドビュー
読み込み時間 6.05 秒 2.39 秒
レンダリング開始時間 4.53 秒 1.76 秒
リクエスト総数 15 リクエスト 4 リクエスト
バイト総数 318779 Bytes 14651 Bytes
Javascript バイト総数 131803 Bytess 0 Bytes
html バイト総数 26946 Bytes 13785 Bytes
CSS バイト総数 69494 Bytes 0 Bytes
image バイト総数 90536 Bytes 866 Bytes

※軽量化/高速化はコンバージョンをあげる対策ではございません。予めご了承くださいませ。

軽量化・高速化プランの特徴

サイトの分析力

軽量化、高速化は画像、デザインパーツ、コードなど、データそのものに対する施策だけでは不十分です。サイトが達成しようとする目標と、そのための機能を犠牲にすることなく、バランスをとって設計するディレクション力が重要です。
TOUCH&SLIDEでは、まずディレクターが上記の全体最適を、課題発見から実現方法、その後の運営・更新まで考慮して設定します。その上で、デザイン、コーディングはもちろん、時には文字量にも目を向け、リライトも行います。また、情報の取捨選択、サイト構成の変更など、部分的に考えるのではなく、全体として機能させることで、バランスの取れた軽量化・高速化を実現しています。

多彩な技術力

■掲載コンテンツの精査

ユーザーとスマートフォンサイトのかかわり方や傾向を考慮し、利用シーンを想定したコンテンツの取捨選択を行います。厳密に言えば軽量化・高速化の施策ではありませんが、このコンテンツを体験するスマートフォンユーザーにとって無駄な情報を減らすことで、データも軽くなり表示速度アップにつなげます。

■HTTPリクエストを削減

  • CSS Spriteの採用
    該当するページ(サイト)で使われる画像を一枚画像にし、CSSで表示する領域を設定することにより、画像を読み込むためのサーバーリクエストを減らすと同時に、画像の総サイズも減らしています。ただし、この施策はすべての画像に使えるわけではなく、ある程度の設計が必要となります。その分、手間のかかる施策ですが、サイト全体のバランスを考えた軽量化・高速化施策ができるTOUCH&SLIDEだからこそご提供可能な施策です。
  • 外部ファイルの一元化
    WebページはHTMLだけではなく、CSSやJavaScriptなど複数の技術が組み込まれています。これらはHTMLに直接書くか、外部ファイルとして読み込みますが、サイト更新を考慮し機能ごとに外部ファイル化する場合がほとんどです。それを一つにまとめることで、HTTPリクエストを減らしています。
    ※サイトの更新が煩雑になる場合もあるため、サイトの特性と目的を考慮して実施しております。
  • CSS3による構築
    CSS3を使うことにより、これまで画像で表現していた、ドロップシャドウ・グラデーション・角丸などが数行のコードで表現しています。5Kバイトの画像が、たった数バイトに削減できる場合もあり、大幅なファイルサイズ削減を可能にしています。

■写真・画像の最適化

画像サイズの軽量化については、見た目の美しさや可能性、訴求力の低下を最小に抑えながら、可能な限り縮小していきます。「このツールを使えば軽くなる」という簡単なものではなく、画像の良さを捨てずに、微調整を繰り返す、職人技が必要です。加えて、コーディング時には各画像に対して、サイズ(width、height)の指定を徹底し、1バイト単位の調整も行っています。

■コードのデータサイズ削減

何のルールも設定しないHTML・CSSは作らず、サイトごとの軽量化・高速化用ルールをあらかじめ設定し制作しています。また、データサイズの圧縮が作業者の主観で終わらないよう、チェックや管理も徹底しています。

■体感速度向上

ページを開いた際、ページの各パーツ要素をどのようなタイミングで読み込むかによって、データサイズは変わらずとも、ユーザーにとってはストレスなく表示されたと感じさせることができます。例えば、ユーザーによく見られると予想されるコンテンツは、あらかじめ読み込んでおき、見られることが少ないと予想されるコンテンツは、開いた際に読み込む制御をすることで、ユーザビリティーを維持したまま体感速度を向上させます。

ブランド力につながるサポート体制

制作会社や広告代理店の皆様には、エンドクライアントに対し、弊社営業が同行訪問を行い、代わりに説明を行うことが可能な上に、提案書や施策案の立案、提示も代行できます。もちろん制作中、受注後のサポートも万全です。
単なる「スマートフォンサイトの制作代行」から「スマートフォンに強い会社」というイメージにつながるよう、バックアップしております。

よくあるご質問

Q1
都度発注が面倒なので、弊社用の構築体制を作っていただけませんか?
貴社のスマートフォンサイトの提案方法に応じて、弊社側でチームを組むことも可能ですし、実績もございます。定量制作や定額でのご発注、ディレクションのみ、コーディングのみなどの部分発注、アドバイス・サポートのみの契約などもございます。大量・継続的に案件がある場合はぜひご相談ください。
Q2
大量ページ数でも対応できますか?
40人の制作スタッフがおりますので、大量でも急な案件でも対応可能です。ぜひご相談ください。ただし、一般にすべてのページを軽量化・高速化する必要はございませんので、実現方法や仕様作りからご相談いただければ、金額や期間を抑えた提案が可能です。
Q3
打ち合わせだけではなく、実制作の際もクライアントと直接応対してもらえますか?
可能です。担当する営業やディレクターがクライアント様に応対いたします。「こんな内容は聞いていない」ということのないよう、やり取り内容は常にお客様と共有いたしますのでご安心ください。
Q4
納期は7営業日~となっていますが短縮は可能ですか?
もちろん可能ですが、短縮する分、作業時間が圧縮されるため通常納期料金の10%(1日あたり)が加算されます。ご了承ください。ただし、サイトの状態、ページ数によりお請けできない場合もありますので、一度ご相談ください。

価格・納期

価格 100,000円~
納期 7営業日~

※制作する内容によって価格、納期は前後いたします。

お見積もりから納品までの流れ

お見積もり

高速化・軽量化対策を施すサイトをお知らせいただき、軽量化・高速化できる要素を弊社で挙げていきます。挙げられた要素をもとに施策内容を詰め、軽量化できる予想値とお見積もりをご提出します。お見積もりは工程管理費やデザイン修正費、コーディング修正費など、工程ごとの料金を明確にしています。TOUCH&SLIDEは工程ごとの依頼も可能ですので、お客様でできる作業がある場合は、その分の料金をお値引きいたします。

スケジュールの作成

納期に合わせた制作スケジュールを作成します。
途中確認の日時や項目についてご提示いたしますので、ご都合が悪い場合はお申し付けください。調整いたします。

軽量化・高速化
施策の実施

サーバー環境によって速度は変化するため、軽量化・高速化施策が終了したデータはお客様に送付し、本番環境と同じ状態でご確認いただきます。同時に改善前と改善後の表示速度が比較できる一覧表を、ページごとにお渡ししますのでご確認ください。この時点で修正がある場合はお申し付けください。
※FTP情報をご提供いただければ、弊社がお客様のサーバーにアップすることも可能です。

最終チェック

レイアウトの崩れやコーディング文法のチェック最終確認を行います。表示のチェックはiPhone、Android搭載の実機で行い、表示の乱れがないように厳重に確認します。HTMLコーディングが終了しましたら、弊社のテストサーバー上にアップロードいたしますので、お手持ちのスマートフォンで実際のサイトと同じように、動きも確認できます。万が一この時点で修正がある場合はお申し付けください。

表示確約
対応OS iPhone3GS、4
Android 2.1、2.2、2.3
また、Android1.6を除く、すべてのOSと解像度の違いをエミュレーターで確認します。
機種チェック
docomo Xperia, Xperia arc, Gallaxy S, MEDIAS
au IS03, IS05
SoftBank Desire, GALAPAGOS、iPhone3GS、iPhone4

納品 

制作したサイトのデータは、メールでお送りするか、貴社ご指定のサーバーへアップロードを行います。検収で問題がなければ納品とさせていただきます。

納品内容
HTMLコーディングデータ、デザインデータ(iPhone用ホームアイコンを含む)

お問い合せはこちらから

↑このページの上部へ