Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
ブログのネタ集めにディズニーランドのサイトを見に行ったのですが、最初にディズニーランドのクリスマス特集ページを見に行った時、結構大味な感じなんだなという印象でした。
しかしシーと比べた時に意外と考えられたデザインだなと思ったので取り上げようと思います。
基本的に構成が同じでしたが、ターゲットユーザーを踏まえて使用している色・フォント・あしらいを変えていました。
ディズニーランド（クリックで拡大）
ディズニーシー（クリックで拡大）
これが比較するとおもしろいです。（サイトは現在は見れなくなっています）
まず、メインタイトルの「ディズニー・クリスマス」
ランドには「丸フォーク」というフォントを。
シーの方では「フォーク」という同系列ですが異なるフォントが使われています。
角がある分フォークのほうが大人向けな印象になりますね。
メインのミッキーとミニーの衣装も、
ランドの方はちょっとおしゃれな私服のような服で親しみやすさがあり、
シーはクールでゴージャスな特別感のある衣装写真を使っています。
全体のデザイン要素としては
ランド：
基本のテキストフォントが丸ゴシックを使っていて、全体的に柔らかい雰囲気です。
最近のフラットデザインではなく、リッチデザイン系統ですね。
構成はほぼ画像で作られています。色は明るい赤系統を使いながら落ち着く色合いでまとめられており、派手なクリスマス！というよりも家族で楽しいクリスマスを過ごしましょう、という印象です。
ボタンやボックスなどが薄いグラデーションがかっていて、羊皮紙のようです。
このページの個人的な印象ですが、ターゲット層は中高生ではなくファミリー層（特に女性）な気がします。
あまり男性向けではありませんね。
シー：
基本テキストフォントは明朝体を使っていて、タイトル的な部分はフォークフォントを使用して文字に高級感を印象づけています。
こちらはアイコンなどはランドと違ってあしらいが少ない、立体的な装飾は少なめです。
ページ全体の色は紺色で、ランドの羊皮紙のような部分はこちらではゴールドを使ってしっとりと落ち着いたイメージでありつつちょっとゴージャスな印象。
ランドがファミリー層向けであれば、こちらはカップルや大人向けという感じな気がします。
男性が見ることも意識している気がします。
エンターテイメントのコーナーの写真の選び方も、ランドは会場の雰囲気がわかる画像を。シーはキャラクターに焦点を当てて撮っているようです。
食べ物のコーナーも、ランドは「子どもが喜びそうなボリューム感を持たせるもの、甘いもの」シーは「お酒、特別さを感じさせるもの」を使っていますね。
確かシーの方だけお酒が飲めるのでしたっけ？
ディズニーランドとディズニーシーのページがきっちり差別化を図ってブランディングされていました。
基本デザインそのままに、あしらいを変えることで制作費を抑える。実にコスパのいい作りです。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
今回はweb制作で便利なサービスをピックアップいたします。
chirami
テスト環境がなくてもWEBページとして確認ができるHTMLプレビューツールです。
弊社の場合お客様にお見せしたり確認していただく用のテストサーバーというものはご用意しているのですが、さくっと作ったテストページを見てもらいたい時、いちいちFTPソフトなどでサーバーにアップして、それを見てもらう工程を省きたい（テストのテスト的な）
「テストページを更新したと言われて見に行っても見た目変わっていないのですが…キャッシュの削除？なにそれ？」な人に都度説明をする手間を省きたい。
そんな時に便利かもしれないサービス。
それが「chirami」です。
使い方は
ユーザー登録が必要です。
登録はTwitterアカウントかGitHubアカウントかFacebookアカウントのみです。メールアドレスはできないようです。
私はTwitterもFacebookもやらないので登録していたGitHubでサインインしました。
「index.html」ファイルが含まれているフォルダをアップロード。
100ファイル／30MBまで／5サイト分1度にアップロードできます。
制限が100ファイルなので大規模なサイトや、画像を多用しているサイトのアップロードは耐えられないと思います。
数ページ程度の小規模までですね。まあ、それ以上の規模になるなら素直にテストサーバーにアップすると思いますし、あくまでHTMLファイルの「チラ見せ」用なので割り切りやすいです。
アップが完了したらURLが生成されるのでそれを相手に伝えればweb上でチェックができます。
社内のスタッフ間でさくっとデザインを見せたい時、サーバーにアップするまでもない状態のものの動作を確認したい時にも使えます。
また、生成した公開用のURLは24時間で消えるので安心です。（手動でも消せます）
便利な使い方、他
各デバイス・ブラウザ別にテストをしたい時、それぞれのデバイスでログインしていればURLが簡単に確認ができます。
私は泥臭く、スマホで見たい時はQRコードを作ってPCの画面から読み込んだりしているのですが、こういった方法はスマートですよね。
小文字大文字変換
結構地味に使うときが多いのがこちら
例えばテキストで支給いただいた文章の「Social site」「Content」などを「SOCIAL SITE」「CONTENT」に変えたい時。
さくっとこのサイトを使って変換してしまいます。（もっといい方法があるのでしょうが…）
シンプル・イズ・ベスト
変換したい文字を入れて
「変換する」ボタンを押すだけでOKです。
全角半角変換
地味に使うときが多い第二弾です
例えば同じファイル内で「０１２３４と56789、ｱｲｳｴｵとアイウエオ」といった「全角半角が混在している」「全角になっているものを半角にしたい」場合。
そんな時はこのサイトで文字列を整えてあげましょう。
変換したい文字を入れて
文字の種類ごとの変換方法を選んで
「変換」ボタンを押すだけ！
ちなみに押さなくても下にリアルタイムで結果が表示されます。
おおよそのパターンは
数字と英字を半角、カナは全角、記号と空白はケースバイケースで基本変換しない
という設定がベターかなと思います。
このサイトでは他にも様々なwebアプリがあるので見てみるとおもしろいです。
以上、時々趣味で使えるものはないか探すことがあるのでまたこういったwebサービスを紹介できればと思います。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
それはAIが人物素材を作るというものです。
この世に存在しない人を作っているので、明確なモデルはいません。
画像を作るAIと、その作った画像を評価させるAIを敵対関係にさせることで精度を上げていく
ディープラーニングアルゴリズム「GAN」（Generative Adversarial Network：敵対的生成ネットワーク）というものを利用しているということです。
すごいのは思っていたよりもかなり自然だなと言う点。
ベータ版として研究中なので公式的には品質が不安定とのこと。
確かに背景や体の部分は不自然な人もちらほらいます。顔は得意だけどまだまだ体は苦手なのでしょう。
ただ見ていると世の中にかならずいるだろうと思わせるほどリアルな人の写真です。
画像サイズも512px四方なのでwebで使う分にはほどよいですね。
わざわざモデル以外を使う理由は何？というと、写真使用の許可を撤回されて使えなくなるというリスクがないということ。
一応注意点としては
実在しない人物とはいえども、通常の素材と同様にお客様の声といったものの顔としては使えません。
完璧とはまだまだいえない発展途上なので、今後に期待したいところですね。
もっと時代が進んだら、そのうち雑誌に載るのはAIが作った「その雑誌の購読対象の人たちにとって理想的な人物モデル」が作られて、それが服を着たりポーズをとるようになるのだろうかと思いました。
テレビもそのうちそうなるのでしょうか？バーチャルには事件を起こしてお蔵入り、なんてことはありませんからね…
実際ARを使ったバーチャル試着ができるようになっているので、写真モデルの完全にデジタル化は早そうです。
さすがに映像はもうちょっと先じゃないかなと思っていますが。
未来はどうなっているんだろうなーと思いつつ、きっとその世界は一市民がしている予想よりずっと早く訪れることでしょう。
最後に、AIが作った画像一覧です
なかなか自然ですね！
とはいえ、
時々やらかすので油断できません。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
今回は制作会社へのデータの送り方についてまとめてみました。
こちらは弊社だけのローカルルールではなく、ほぼ全ての制作会社で共通しているので参考にしてください。
※今回画像のサイズや解像度については別の話となります。
データの送り方って？
まずお客様にご用意いただく画像といえば…
◯◯.jpg
◯◯.png
◯◯.pdf
などが多いですね。今送ろうと思っている手元の画像をチェックしてみてください。
gifなどは写真には不向きですのであまり推奨しません。
できるだけ手元にある高画質、大きい画像をご用意ください。
ご用意いただいた各データを原稿として画像などを送ろうと思われた時、
ぜひ弊社のみならず各制作会社へ画像を送られる時にご遠慮いただきたい方法があります。
それは
WordやExcel、PowerPointに画像を貼り付けてそのデータを送るということです。
もちろん理由があります
・開いた時画像の比率がおかしくなっている事が多い
これはMacとウィンドウズのソフト間で起こる仕様なのか私には定かではないのですが、高確率で縦横の比率がずれています。
例：縦78％、横97％
・そこに貼り付けられている画像を再加工する時不要な作業が多く非効率
例ですが、
エクセルを開く 画像を右クリック 画像の比率を確認して正しい数値にする コピー Photoshopを開く 新規クリップボードのサイズ 貼り付け 解像度とカラーモードを適切に設定する 名前をつけて保存 適切な名称にする
という作業を1枚ずつ行っていきます。これ以外の方法で画像を取り出す人もいると思いますが。
・そもそもお客様自身も手間
エクセルを立ち上げて 新規作成 画像を貼り付けて サイズ調整して 名前をつけて保存 メールを立ち上げてエクセルファイルを送信
塵も積もれば山となる。です。
そして残念なことにこの手間は両方が不幸になります。画像がたくさんだった場合、おそらく制作の人間は泣いています。
推奨する画像の提供方法
やり方はただ一つ、お手元の画像ファイルを何もせず、そのまま添付してお送りいただくのみです。
どこかに貼り付ける前のその画像を、そのままお送りください。
いっぱいあったりしたら、zipファイルなどに圧縮してまとめて送りましょう。
データのサイズが大きくてメールでは送れないような場合は
ちょっとずつ送るのもNGではありませんが、
こういう時はファイル転送サービスをご利用ください。
・ギガファイル便
・宅ファイル
・firestorage
などなど。「ファイル転送サービス」と検索すればとりあえず何かしらでてきます。
無料で使えるので、こちらをご活用ください。もしかしたら社内でのやりとりでもお役に立てるかもしれませんね。
レイアウト指示や画像の説明文としてお作りいただいている場合は？
ありがとうございます。とてもありがたいです。
そして画像単品データをご一緒にお送りいただけるともっとありがたいです。
どこかで推奨している？
不思議なのですが、このような送り方思いの外多くのお客様がされています。
どこかでこの方法が良いという話があるのでしょうか？
さくっと調べてみたのですが、
http://u-note.me/note/47490009
「画像をメールに添付したい時のExcel活用法」
…これ？
ビジネスマナーとして提唱されてるんですか？
このビジネスマナー、「※ただし制作会社に送る場合は厳禁」を付け足して欲しいところです。
なるほど。だからみなさんこういう風にしているんですね。
でもお待ち下さい。
いわゆる制作会社が使う画像はお客様が想像している以上に「高画質、大きなサイズ」が必要なのです。
例えばwebで見れるサイズと印刷する時に必要なサイズは簡単に言うと5倍くらい差があります。
こういう理由もあり、
一般的にwebサイトで使われている画像を印刷用に使うというのは適しません。ご希望のサイズで使うには多くが小さすぎてガタガタな画質になります。
大きいものを小さくすることはいくらでもできますが、小さいものを高画質で大きくすることはできません。
画像をおくる時は、メールで送れないからといって
画質を落とさない（軽くしない）、サイズを小さくしない、ExcelやWordやPowerPointに貼り付けず画像そのまま、送れないくらい大きくなったらファイル転送サービスを使う
こちらをお守りいただけると制作の人間の笑顔が増えます。
きっと見えないところで「ありがたや！」と拝まれていることでしょう。
よろしくお願いいたします。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
便利なweb制作ツール第2段です。
今回は文章系・コード系です。
webだけでなく印刷物でも使えるものもあります。
_
●ダミー文章生成●
ダミーテキストジェネレーター
長文のダミーテキストは「ダミーダミーダミー」または「テキストテキスト」などなど。
古今東西様々な文章を仮入れすることがありますよね。
webでも印刷物でも。
例えば社長様の挨拶文、だいたい300字くらいではいる予定。だいたい100字をここにいれたい。
お客様に文章のボリュームを見てもらう、確認したい場合など。
こんな時、すぐに文字数分のダミー文章を用意するのはなかなか大変ですよね。
そんな時はさっさとこのジェネレーターで適当な文章を作ってしまいましょう。
①ダミー文章の種類を選び
②文字数を入力
③最後に生成を押すと下に文字数分の文章がでてきます。
とっても簡単。
改行が欲しい場合は適宜つける必要ありです。
_
●文字数カウント●
文字数カウンタ
地味に使っています。
文字数制限がある場合、これでサクッと範囲内に収まっているか確認することが多いです。
ECサイトなどには制限が多いので。あとはディスクリプションとか。
リアルタイムでカウントしてくれます。
_
●文章比較ツール●
Diff Checker
修正などでもらったけどこの文章と元の文章、パッと見違いがわからないけど何が違うの…？
そんな時はこれでチェックしてみましょう。
ワードとかにも確か比較機能はあったと思いますが、いちいちワードを立ち上げるくらいならさくっとこれで調べます。
純粋に違う部分を表示してくれます。
違いがわからない2個のテキストを用意して、それぞれに流し込み（左側がオリジナルテキスト）
※弊社デザインフラットのHPソースより。
Find Difference!のボタンを押すだけ
すると色を付けてオリジナルと違うところを教えてくれます。
場所がわかればあとは比較するだけ！
例えばwebサイトであれ？ファイル2個あるけどこのコード何が違うんだっけ？という場合地味に助かります。
あとはテキストの修正が来た時、あれ？これ一緒じゃないの？というときもチェックできます。（前と同じデータを送り間違っている可能性も0ではないので）
_
●コード整形ツール●
コード整形ツール
自分自身汚いコードを書くことを自覚しているので、最後にこの子で整えます。
インデントと改行を自動で調整してくれるものです。
css、JavaScript、HTMLをそれぞれ適切に見やすくしてくれます。
コードを貼り付けると自動で整形してくれるので便利です。そこは改行せずまとめて欲しい、という場合もなくはないですが。おおむねきれいになってて余計な空白もなくなります。
_
いかがでしょうか。
世の中便利なサービスはまだまだありますので、活用して時短してしまいましょう。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
今回は個人的にwebサイトを制作する時に使える便利な小ネタサービスをご紹介します。
ーーーーーーーーーー
●モバイルサイトの速度テスト●
https://testmysite.withgoogle.com/intl/ja-jp
サイトを作ってみたけれど、果たして実際にモバイルで見た時の速さはどれくらいなのだろう？
そんなことを確認できるのがこちらです。
使い方はとても簡単
まずはテストをしたいサイトのアドレスをいれます
矢印をクリックするとテストが始まります。後は勝手に分析をしてくれますのでしばらくお待ち下さい。
今回は楽天にしてみました。特に他意はありません。
すると読み込み速度を元にさまざまな結果を返してくれます。
3Gでの読み込んだ場合なので、昨今の日本国内においてはもっと早く表示されると思いますが…
世界中では3Gが多いということで読み込み環境は3Gなのだそうです。
同業種の中で早いか遅いかもわかり、結構面白いのでついつい見てしまいます。
ちなみに、こちらはモバイルサイトの速度計測なのでPCサイトしかないサイトではユーザビリティが悪いよ！と言われます。
ーーーーーーーーーー
●ダミー画像メイカー●
http://placehold.jp/
地味に欲しいダミー画像。こちらはサイズが自由に設定できます。
お客様から届いていないけどなにかしらの画像が入る時、仮の画像としていちいち用意するのは無駄ですよね。
そんなときはこれでとりあえずいれて、全体のレイアウトなど確認をしましょう。
灰色画像なのでイメージが固定される心配もありません（挿入する画像のイメージが固定できないともいえますが…）
こちらも使い方は簡単です。
まず左のメニューに幅と高さを入力します。
こちらは1px単位で設定が可能です。
画像を生成するボタンを押すと右側に、画像のアドレスと、表示イメージがでてきます。
あとはこのアドレスを
ーーーーーーーーーー
●インラインスタイル変換●
https://inlinestyler.torchbox.com/styler/
一般的にはcssデータを作って読み込ませるのが一般的ですが、このサイトではそれを各要素の中に直接装飾タグを入れ込んでくれます。
え…今どきわざわざインラインにすることってあるの？と思われる方もいらっしゃるかもしれませんが。
意外と需要はまだあります。
楽天、YahooなどのECショップは基本インラインです。メルマガを豪華な装飾や見せ方を独自のものにしようと思うとインラインにしないといけません。
いかがでしょうか。
他にも色々なwebサービスがありますが、こういったツールを使うと便利です。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
WEBでも印刷物でも、ちょっとしたことで悩むのが見出しのデザイン。
黒色で文字をおいただけ、大きくしただけではおもしろくないですよね。
ちょっとしたアクセントに使えそうな見出しデザインをいくつか作ってみました。
WEBで使えるようにcssのコードも合わせて掲載します。
基本の形はこちら ※宮沢賢治「セロ弾きのゴーシュ」
———-
01 下線
シンプルに下線を引いたものです。
コードはこちら
———-
02 下線ドット
ドットの線に変えました。
コードはこちら
———-
03 上下ドット
ドットの線を上下に引いたものです。
コードはこちら
———-
04 上二重 下一重線
上は二重の線、下は一重の線です
コードはこちら
———-
05 背景色付き
背景に色を付けたものです
コードはこちら
———-
06 背景色付き+上下線
コードはこちら
———-
07 角丸囲い
角丸で囲ったものです
コードはこちら
———-
08 横線
おそらくよく見るであろう横線を引いたもの
コードはこちら
———-
09 サイド囲み
両サイドで閉じたもの。文字はセンター揃えがよろしいかと。
コードはこちら
———-
10 ステッチ
ちょっとかわいらしくステッチのように
コードはこちら
———-
11 マーカー
蛍光ペンで引いたイメージ
コードはこちら
———-
12 ストライプ
ストライプの背景です
コードはこちら
———-
webでよく使うデザインですが、ちょっとした印刷物にも使えるかと思いますのでご参考ください。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
ふだんから事務書類などでなじみのある定型規格があってサイズ感が分かりやすいです。
少々変わった形であっても、「縦が○○mmで横が○○mmです」といえば、
メールや電話越しであっても、共通認識として大きさを伝えることができますね。
しかし、WEBサイトのデザインでサイズ感を伝えるとなると、なかなか難しくなります。
WEB担当として携わったり、画像類を日常業務で扱われている場合などを別として、
多くの場合、ふだん「○○ピクセル（px）」なんて単位で大きさを表現することはあまりありませんから。
また、サイトのデザインを指定したい場合に、どうすればより正確に伝えられるか。
となると、やはり「数値」や具体的な「名称」での指示・指定ができるに越したことはないのです。
というわけで、今回はWEBサイトの「見た目」を手軽に測るのに便利なChromeのプラグインを3つご紹介します。
まずは、見ているページの幅や高さなど「サイズ」を測るツールです。
1. Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja
このプラグインを起動すると、ページ上で任意の範囲をカーソルドラッグで指定できるようになります。
上部には指定範囲の幅や高さをはじめとする情報が表示されるバーが出現します。
サイトの幅や画像の大きさなどは、ディスプレイ環境の高精細化で大きくなる傾向にあります。
とにかく大きくすればよいというものでもありませんが、
制作してから少し期間が経っているページは幅が狭いというだけで、何となく古臭く見えてしまいます。
色々なサイトを見ていて、これは見やすいな、ちょうどいいな、なんて思った時にこれを起動して測ってみてください。
リニューアルする際の参考になると思います。
次は、「文字」を測ってみましょう。
2. WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
こちらを起動すると、カーソルで示した部分の書体（フォント）情報を教えてくれます。
使用している書体の名前や大きさ、装飾スタイルや色指定なんかも分かっちゃいます。
WEBページで使用するフォントも、先と同じ理由でだんだん大きくなる傾向にあります。
画面のサイズが同じでも解像度は高くなっていますから、同じピクセル数では実際に見る文字は小さくなってしまいます。
これもふだんから測っておくと、フォント選びも含めて、視認性の高いサイトにする際の良い指標となります。
では最後に「色」を測ってみましょう。
3. ColorZilla
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
先にご紹介したツールでも部分的に色指定値を測ることはできますが、
こちらは複雑なグラデーションや画像の一部など、細かな部分もしっかり測れます。
起動するとカーソルで指定した箇所の色指定が表示されます。
記録しておきたい部分はクリップしておくこともできますし、より専門的な分析ができる機能もあります。
シビアな色指定がない場合など、制作時にたまたま手元にあったロゴの画像データを使ってしまっていたり、
同じロゴなのになんか色が違うな？とか、テーマカラーが微妙にずれていたりということが少なくありません。
人間の目は錯覚を起こしますし、ディスプレイによる色再現の差は結構大きいです。
隣の席のパソコンと並べて、同じものを映して比べてみるとびっくりするくらい違ったりします。
同じ機種でも、設定で大きく変わることがあります。
色指定を数値で決めておくことができれば、基準値がはっきりしますので、そんな不安も解消できますね。
いかがでしたでしょうか。
WEB制作に役立つ、便利な機能を持ったプラグインは他にもたくさんあります。
新しいものも出てきて何がいいか迷うかもしれませんし、多機能すぎて扱いにくいものも中にはありますので、
まずは定番ともいえるこの3つのプラグインを試してみることをおすすめします。
デザイナーでなくとも役立つこと間違いなしです。
CANVASではパンフレットをはじめとする紙媒体以外にも、WEB関連の制作も同じくらい行っています。
会社案内を初めて作ったり、全面的にリニューアルされる場合には、
同時にホームページの制作を進めることがよくあります。
当サイト「パンフレット制作しチャオ！」でも、こちらのページで詳しくご紹介しています。
WEBサイト制作に関しては姉妹サイト「ホームページ制作しチャオ！」でも、より詳しくご案内しております。
他にも、分かりやすく簡単な操作で更新作業が行える、クラウド型高機能CMS「GoWEB」など、
ご要望に応じたWEBサイト制作を承っておりますので、ぜひお気軽にお問い合わせください。
【京都オフィス 小嶋】
]]>Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405
サイトを作ったり、LPを作ったりする時
「どのサイズで作るのが一番良いのだろうか」
ということはよくあります。
自分がwebを見ている時のサイズと、他の人達が見ているのは必ず違うはずです。
せっかくなので色々調べてみました。
参考サイト：http://gs.statcounter.com/
ブラウザのシェア…
Source: StatCounter Global Stats – Browser Market Share
こちらの表を参考にすると圧倒的にChromeなのですね。
他との差がとても開いています。Chromeが55％でその次点のSafariは14％。
自分もメインがChromeを使っていて、サブブラウザにSafariを使っています。
昔はOperaを使っていた時もありましたが、最近はもっぱらChromeです。
ちなみにこの表は世界的話です。
ではここで日本でのブラウザのシェアを見てみましょう。
Source: StatCounter Global Stats – Browser Market Share
とてもばらけていますね。
そして1位、2位は変わらずですが3位にIEが躍り出てきます。
さきほど世界シェアではIEはびっくりするくらい低かったのですが、やはり日本人はIEに馴染みがあるのでしょうか。
おそらく殆どの人は初めて触ったブラウザはIEだと思います（Windowsの方は）
正直「ブラウザ？なにそれ？」という人はわざわざ乗り換えることはしないでしょうし、そういう意味では
あまりパソコンに（興味がない）詳しくなくても、色々な人が身近にインターネットに触れているということかもしれないです。
次にスクリーンサイズ（デスクトップパソコン）のシェアについてですが
世界
Source: StatCounter Global Stats – Screen Resolution Market Share
日本
Source: StatCounter Global Stats – Screen Resolution Market Share
おもしろいですね、1位と2位が世界と日本は逆転しています。
日本のほうが大きいサイズが主流のようです。確かに電気屋に並んでいるデスクトップならほぼ1920*1080サイズではないかなと思います。
私は21.5 インチ（1920 x 1080）を使っています。ここでも多数派でした。
気になるのが日本の3位に入っている2560*1440の大きさは世界では個別数値として上がってこないレベルです。
このご時世、デスクトップパソコンを使う方は仕事で大きな画面で作業をする人なのかもしれませんね。
それではwebサイトを作る時はどのサイズが良いのでしょうか。
普通画面いっぱいでブラウザを見る人はまず居ないと思います（youtubeなど動画を全画面再生は別として）
ページの左右余白含め、1000px程度あれば上位ほとんどの人にはストレス無くみれるのではないでしょうか。
ちなみに、webサイトの幅が小さすぎると今度は「一昔前のインターネットサイト感」が出てダサくなります。
サイトを幅500pxとかで作るのはやめましょう。
時代が進むに連れて日本では大画面化が進んでいるという印象がありました。
スマートフォンも大きくなってきているので（画面サイズの需要だけでなくバッテリーのあれこれもあるのだと思いますが）
今後も時々気をつけてwebサイトのサイズについて考えていきたいと思います。
webサイトで表示テストをするとき、重要視するのはChromeでの見え方。
ただし、クライアント様の環境が他（IEなど）のブラウザであればそちらの表示が最も美しくなるようにしたほうがいいかもしれません。
スマートフォンサイトの見え方はiphoneの最新版で考えた方がいいでしょう。
Warning: count(): Parameter must be an array or an object that implements Countable in /home/ciao-design/www/pamphlet/blog/wp-includes/class-wp-comment-query.php on line 405