スマホサイトのデザイン作成で注意する点について
- 2020年3月24日
今回は、スマホサイトのデザイン作成で注意した方が良い5つの点についてご紹介いたします！
・スマホサイトのデザインは「端末の横幅」×「2倍」のサイズで作成する
スマホサイトのデザインは、375pxを2倍にした 750px が推奨されることが多くあります。理由は、Retinaディスプレイを搭載したスマートフォンは、通常の倍の解像度を表示することが出来るためです。
そもそも、Retinaディスプレイとは一体どのようなディスプレイのことなのでしょうか？
「Retinaディスプレイ」の概要について触れてみましょう。- ■ Retinaディスプレイとは？
- Retinaを和訳すると“網膜”という意味になります。肉眼では認識することができない程細かい画素を表示するため、この名前が命名されました。すなわち、Retinaディスプレイは高画素密度のディスプレイであることを意味し、従来のディスプレイの倍の解像度を再現することが可能になっています。
このことから分かる通り、Retinaディスプレイは2倍の密度で表示するため、「端末の横幅」×「2倍」のサイズが必要になります。端末の横幅は、スマートフォンのシェア数が多い端末を参考にするようにしましょう。
※ スマートフォンの技術は加速しており、Retinaディスプレイの画素は2倍だけでなく、3倍、4倍を再現することが可能な場合もあります。そのため、画像サイズは閲覧者のデバイスごとに切り替わるようCSSを記述した方が安心でしょう。
・画像サイズはできるだけ軽くする
閲覧者はページの読み込みに時間がかかると、待ち時間にストレスを感じて他のスマホサイトに行ってしまうことがあります。したがって、画像サイズは軽くするように心掛けましょう。・レイアウトはシンプルなデザインにする
スマートフォンはPCと違って画面が小さいため、シンプルなレイアウトが良いでしょう。また、メニューは開閉可能なアコーディオンメニューが一般的となっています。・スマホサイト内での迷子対策を行う
閲覧者がスマホサイト内で迷子になってもTOPページに戻れるように、各コンテンツ内の分かり易い場所にTOPページへのリンクを貼っておくようにしましょう。・PC版のレイアウトに表示変更できるようにする
閲覧者によってはPC版の表示でスマホサイトを見たいという要望もあります。そのため、自由に表示切替できるように「スマホ版 / PC版」の表示設定を設置すると良いでしょう。スマホサイトをデザインする際の注意点がお分かりいただけたでしょうか？
技術は日々進歩しています。サイトデザインの作成では柔軟に変化を取り入れるようにしましょう！
Web制作で使用する「単位」とは？
- 2020年3月16日
Webサイトをデザインするときの単位について
Webサイトのデザインを行うとき、どの単位を指定すれば良いか悩むことはありませんか？
例えば Photoshop を使用してデザインする場合、新規ドキュメントの作成では、次の画像のように単位を「ピクセル、インチ、センチ、ミリメートル、ポイント、パイカ」の中から指定します。
あまり馴染みのない単位もあるのではないでしょうか。そこで、ここではデザインするときの単位についてご紹介します。
- ・ピクセル
- デジタル画像を表す最小の点を指します。デジタル画像を拡大すると、四角い点の集まりであることが分かります。この四角い点の1つ1つがピクセルです。
- ・センチ
- 物差しの目盛りに書いてある「cm」と同じ長さです。メートル法の単位で、1センチは1/100メートルになります。
- ・ミリメートル
- センチと同じく、物差しの目盛りに書いてある「mm」と同じ長さです。メートル法の単位で、1ミリメートルは1/1000メートルになります。
- ・インチ
- 1インチをセンチで表すと2.54センチになります。
- ・ポイント
- ワープロでおなじみの「pt」です。国によってポイントのサイズは異なります。日本では、1ポイントを0.35ミリメートルとして使用しています。
- ・パイカ
- 印刷用の活字サイズを表す単位として使われています。1パイカは12ポイントです。インチに換算すると1パイカは1/6インチになります。
■デザイン作成時の単位について迷ったときは？
Webサイトをデザインするときの単位は、ピクセルが一般的となっています。そのため、Webデザインを作成するときに単位で迷った場合は、ピクセルを指定するようにしましょう。Webサイトをコーディングするときの単位について
Webサイトのデザイン部分はCSSにコーディングします。CSSでは文字の大きさや、装飾、行間など多種多様な単位を指定することができます。
具体的にはどのような単位があるのでしょうか？以下に、コーディングで使用する主な単位をピックアップしたので見ていきましょう。
- ・ピクセル（px）
- 絶対値のため、固定サイズで指定します。
- ・レム（rem）
- 相対値の単位で、HTML要素のrootを基準にフォントサイズを指定します。
- ・Viewport Width（vw）
- 相対値の単位で、50vwはウィンドウ幅の50%を指定することになります。
※絶対値とは、他の要素に関係なくサイズを指定することを意味します。それに対して相対値は、親要素など他要素の影響を受けてサイズを決定します。
Web制作で使用する単位には、さまざまな種類があることがお分かりいただけたでしょうか？特にCSSで指定する単位は奥が深いです。興味がありましたら是非調べてみてくださいね！
【FAQ】営業時間内ではないとお問い合わせは難しいでしょうか？
- 2020年3月12日
【お客様からのご質問】
営業時間内ではないとお問い合わせは難しいでしょうか？—————————
【回答】
お問い合わせフォームからのお問い合わせは24時間365日受け付けております。
土日などの休日はよく営業日にご連絡いたします。お電話でのお問い合わせは平日9:00～18:00でご対応させていただきます。
ソリッドレイアウトとリキッドレイアウトの違いとは？
- 2020年3月9日
Web制作では、見やすいレイアウトをデザインすることが大切ですよね。最適なレイアウトは、ディスプレイの違いやコンテンツの内容によって異なります。
例えば、ウィンドウ幅を「固定」と「可変」のどちらに設定するかにより、全く別の見え方になる場合があります。
そこで今回は、ウィンドウ幅の指定方法に焦点を絞り、「ソリッドレイアウト(固定レイアウト)」と「リキッドレイアウト(可変幅レイアウト)」についてご紹介します。
ソリッドレイアウト（固定レイアウト）
ソリッドレイアウトは、一般的にピクセル(px)単位で幅を設定します。つまり、ウィンドウ幅を固定で指定するレイアウトになります。ウィンドウの大きさを変えても、レイアウトが変化しない点が特徴です。■メリット
- ピクセル単位で固定してデザインするため、誰が見ても同じレイアウトを表示させることができます。制作者が想定したレイアウトで、Webサイトを見てもらえる点がメリットです。
■デメリット
- 閲覧者によって、使用するディスプレイが異なります。ソリッドレイアウトでは、適切なウィンドウ幅を指定しないと画面に入りきらず、デザインが崩れてしまうため注意が必要です。
例えば、ウィンドウの大きさを広げたときに余白が表示されたり、ウィンドウ幅が足りない場合は横スクロールをしないと全体像が見えない、というケースがあります。
リキッドレイアウト（可変幅レイアウト）
リキッドレイアウトは、一般的にパーセント(%)で幅を設定します。そのため、ブラウザのウィンドウ幅に適したレイアウトが表示されます。スマートフォン用のサイト制作では、リキッドレイアウトを採用する場合が多いです。■メリット
- ディスプレイの大きさに関係なく、画面内にレイアウトが収まります。自動で閲覧者にとって使いやすいレイアウトが表示される点がメリットです。
■デメリット
- 閲覧するディスプレイにより見え方が異なるため、意図しないレイアウトとして表示されることがあります。さまざまなウィンドウサイズによる見え方のチェックが必要です。
また、ウィンドウ幅を変えると一行に表示される文字数が変化します。適切な位置に改行を入れないと、読みづらいWebサイトになるため注意しましょう。
ソリッドレイアウトとリキッドレイアウトの違いについてイメージできたでしょうか？
Webデザインの中でも、レイアウトの決定はとても重要になります。閲覧者にとって見やすいレイアウトになるよう心掛けましょう！
Web制作に必要なデザインツールについてご紹介！
- 2020年3月2日
今回は、Web制作に必要不可欠なデザインツールについて調査しました。特に人気のある Illustrator、Photoshop、Adobe XD について、各ソフトが得意とする作業をご紹介します。
Illustrator
文字の装飾や、図形の描画など、デザイン作成を得意とするソフトです。点の位置と線、色などを数値データとして記憶する「ベクター形式」で描画します。縮小・拡大しても綺麗に描写する点が特徴です。■Illustratorが得意な作業
- ・ロゴやアイコンの作成
- ・Webサイトのレイアウト作成
■役立つツール
- シェイプ形成ツール：ペンを使わずに記号だけでイラストを描くことができます。
- 線幅ツール：線のオブジェクトに対して、簡単に強弱をつけられます。一定の太さだった線にメリハリが生まれ、より特徴的な線を描くことが可能です。
■Illustratorのデメリット
数値データで表現するため、写真や細かいイラストなどの表現は苦手とされています。複雑な画像を編集する場合は、これから紹介するPhotoshopのご利用をおすすめします。Photoshop
色彩の補正や写真の加工など、画像編集を得意とするソフトです。複数の点を集めて表現する「ラスター形式」で描画します。“にじみ”やグラデーションなど、多彩な色を立体的に描写する点が特徴です。■Photoshopが得意な作業
- ・色彩の補正（例えば、フルカラーからセピア調に変更、青みを強くした色調に変更など）
- ・Webページ用の画像の加工や合成
- ・CG・イラストの作成
■役立つ機能
- アクション：繰り返し行う単純作業を記憶し、自動的に実行することができます。
- スクリプト：アクションは、複雑な条件や、ファイル操作を記憶することができません。しかし、スクリプトを使用することで、それらの作業を記憶することができます。より複雑な作業はスクリプトを利用するようにしましょう。
■Photoshopのデメリット
拡大すると画像がぼやけてしまい、劣化して見える点がデメリットです。Adobe XD
Webサイトやアプリなどの、プロトタイプ作成に特化したUI/UXデザインツールです。初心者でも簡単に、ブログやWebサイトのデザイン作成が行えます。■Adobe XDが得意な作業
- ・Webサイトのデザイン作成
■役立つ機能
- リピートグリッド：繰り返し使いたいデザインを作った後「repeat-grid」をクリックして、繰り返したい方向にドラッグします。この手順だけで、コンテンツを手間なく増やすことができます。
■おすすめ情報
Adobe XDの公式サイトから、XDの主要機能を試せる「Adobe XD スターターキット基礎編＆中級編」がダウンロードできます。まだXDを未体験の方は、この機会に試してみてはいかがでしょうか。
Adobe XD 公式サイト(https://www.adobe.com/jp/products/xd.html)Webサイトのデザインツールを3種類ご紹介しました。それぞれのソフトには特徴があります。ご自分の目的にあったデザインツールを利用して、素敵なWebサイトを作成してくださいね！
初めての1人旅
- 2020年2月12日
1人旅といってもそんな大げさなものではないのですが、
先日初めて1人でおばあちゃん家に行きました。自宅からは片道約4時間で、
広島県の山の中におばあちゃん家があります。
1人で新幹線に乗ることすら初めてで、
荷物もどこに置いたらいいか…切符は2枚通すのか…すらもわかりませんでした。広島駅からは車かバスでしか行けないので、
わざわざ叔母が迎えに来てくれて…。おばあちゃんと叔母と従姉妹と私の4人で2日間を過ごしました。
22歳なのにも関わらず、おばあちゃんの中では私はまだまだ子供らしく、
「新幹線で来なさい」「これ持って帰りなさい」ととても気にかけてくれました。遠いということでなかなか行ってあげることができないのですが、
何年かに1回は行きたいなと思いました。
【FAQ】見積は依頼してからどのくらいの時間でいただけますか？
- 2020年1月30日
【お客様からのご質問】
見積は依頼してからどのくらいの時間でいただけますか？—————————
【回答】
基本、受付けた営業日当日となりますが、一両日中にはお送りいたします。
ボリュームや内容によっては少しお時間を頂く場合がございますが、
その場合はご連絡させて頂きます。
わんこのお告げ
- 2020年1月21日
何も言わず、まずこちらの画像をご覧ください。
どーん
ひどいと思いませんか。
レンズ片一方行方不明になったのです。全く見えなくなくなるほどの目の悪さではないのですが、
レンズも透明のため探すのも一苦労…。見つけた場所は犬のケージの前…
そう…
やつが犯人でした。
この眼鏡を買った当初も耳に掛けるゴムの部分に歯形を刻み込んでくれていました。これを買ったのが専門学校に入学してからなので5年弱…？
視力も悪くなってるやろうし、そろそろ変えろよ…？とわんこが告げているのかもしれません。来月あたり新しい眼鏡を買おうと思います！
凶からの大吉
- 2020年1月21日
フロントの武藤です。
令和2年初のブログ投稿です。
今年も宜しくお願いします(ぺこり)先日ですが毎年恒例のえべっさんに行ってきました。
今年は最終日11日の残り福です。屋台を食べ歩き。
ベビーカステラ
たこせん
たこ焼き
チーズドッグ
チョコバナナ
にごり酒
甘酒 などなどお賽銭して、おみくじ引いて。
主人はお守りとお札を購入。そんな感じで毎年お決まりのコースです。
ただ、次女はおみくじで「凶」を引いてしまい…
その後もう一回引き直して「大吉」を引きました(笑)そして、次女はその日の夜から高熱を出し
翌日はお誕生日でしたが、病院に行きました(泣)「凶」を引いてしまったからなのか？？
今週は元気になっているので、
引き直した「大吉」の上書き効果を期待したいと思います。
【FAQ】ソリッドレイアウト(固定幅)とリキッドレイアウト(可変幅)の違いを教えて下さい。
- 2020年1月15日
【お客様からのご質問】
ソリッドレイアウト(固定幅)とリキッドレイアウト(可変幅)の違いを教えて下さい。—————————
【回答】
ソリッドレイアウトは印刷物と同じように幅を固定したレイアウトです。
幅が固定されているので、どのようなウインドウ幅でもレイアウトは崩れず、
リキッドレイアウトに比べて作業が簡単です。
ただウインドウ幅が広いと余白が多くなり、ウインドウ幅が狭いと
全体が表示されず横方向にスクロールバーが表示されます。リキッドレイアウトはウインドウ幅に合わせてレイアウトが変化します。
幅をパーセンテージ(％)で指定し、ウインドウを広げるとコンテンツも
広がり、狭めるとコンテンツも狭まります。リキッドレイアウトに比べて
作業に手間がと時間が掛かります。弊社ではスマートフォンにもPCにも対応しているものをレスポンシブと載せています。
レスポンシブレイアウトと言うと、一般的にはソリッドレイアウト(固定幅)になります。
料金はリキッドレイアウト(可変幅)の方が単価が高くなります。どちらのレイアウトにするか前もって教えて頂けると
お見積りがスムーズになります。
