期間限定アマゾンギフト券プレゼントキャンペーン

期間限定アマゾンギフト券プレゼントキャンペーン

キャンペーンの利用規約(注意事項)

レバテック株式会社(以下、「当社」といいます。)が実施する「Amazonギフト券プレゼントキャンペーン」(以下、「本キャンペーン」といいます。)に参加し、会員登録される方(以下、「登録者」といいます。)は、以下をよくお読みいただきご登録ください。ご登録を以って、本規約に同意されたものとみなします。
本キャンペーンは、以下の条件を満たす方全員にアマゾンギフト券5,000円分をプレゼントするものです。

条件について
以下のすべての条件を満たされた方が対象となります
2019年9月17日(火)~9月30日(月)の期間中にレバテックフリーランス(https://freelance.levtech.jp/)またはレバテッククリエイター(https://creator.levtech.jp/)に会員登録された方
2019年11月29日(金)までにカウンセリングを終えられた方
※過去にレバテックフリーランスのカウンセリングを受けられた方は対象外です。
※ご友人紹介(https://freelance.levtech.jp/friend/)で登録された方は対象外です。
※当社が保有する案件状況等により、カウンセリングをご案内できない場合もございます。予めご了承ください。
賞品の発送について
本キャンペーン条件に該当する方には、2019年11月4日(月)~2019年11月8日(金)注1または2019年12月2日(月)~2019年12月6日(金)注2の期間中にアマゾンギフト券5,000円分利用コードをメールでお送りいたします。
注1) 9/17(火)~10/31(木)にカウンセリングを受けられた方が対象
注2) 11/1(金)~11/29(金)にカウンセリングを受けられた方が対象
注意事項
お一人様、1回までの登録が可能です。
本キャンペーンの参加において、登録者が真実かつ正確なデータを入力していないこと、または登録者から提供された情報が不十分であったことによって賞品が届かない場合、あるいは登録者の転居や長期の不在などの事由によって当社所定の期間内に登録者が賞品を受領できない場合は、キャンペーン該当者の権利が失効・削除されることがあります。
キャンペーン該当者の権利を第三者に譲渡等はできません。
本キャンペーンの賞品の返品・交換は致しかねます。
当社は登録者の個人情報(本キャンペーンの登録時に登録者が提供した情報)を、当社の「個人情報の取り扱いについて(https://freelance.levtech.jp/privacy/)」に従い適切に取扱うものと致します。
当社は、本キャンペーンにおけるサービスの一部または全てを事前に通知することなく変更・中止・終了することができるものとします。なお、変更・中断あるいは中止または終了により生じた損害については、当社は一切責任を負いません。
細心の注意を払って情報を掲載していますが、当社は、提供する情報、プログラム、各種サービス、その他本キャンペーンに関するすべての事項について、その完全性、正確性、安全性、有用性等について、いかなる保証も行うものではありません。また、登録者または第三者が被った以下の事例により発生した損害については、当社は責任を負いません。
登録者間または登録者と第三者の間におけるトラブル等が生じた場合。
第三者による本キャンペーンのサービスの妨害、情報改変などによりサービスが中断もしくは遅延し、何らかの欠陥が生じた場合。
故意または重過失なくして、当社が提供する本キャンペーンの情報が誤送信されるか、もしくは欠陥があった場合。
レバレジーズグループ社員・関係者からのご登録は無効とさせていただきます。
本規約は日本法を準拠法とし、これに従い解釈されるものとします。また、本キャンペーンに関連して生じた紛争は、東京簡易裁判所または東京地方裁判所の専属的合意管轄に属するものとします。

2016年9月05日

初心者でもわかるレスポンシブデザインの基礎まとめ

これだけは押えておきたい!レスポンシブデザインの基本5つ&便利ツール

これだけは押えておきたい!レスポンシブデザインの基本5つ&便利ツール

スマートフォンの普及と、Googleが導入している検索エンジンのアルゴリズム「モバイルフレンドリー」により、多くのサイトにおいてモバイル対応が必須となりました。
その際、レスポンシブデザインはモバイル対応の有力な選択肢であり、事実、レスポンシブデザインを導入しているサイトは無数にあります。
そこで本記事ではレスポンシブデザインの基本5つの解説と、レスポンシブデザインに役立つツールをご紹介します。
これからレスポンシブデザインについて学ぶ方、または改めてレスポンシブデザインを学び直したい方は、ぜひ参考にしてください。

「自分のスキルの相場をしりたい」と思う方へ

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

単価相場算出ページへ

※相場算出に個人情報の取得はおこないません。



レスポンシブデザインの基本

基本(1)レスポンシブデザインの概要

レスポンシブデザインとは、PC、スマートフォン、タブレットなどの異なるデバイスに、単一のファイルで対応する手法です。
レイアウトや各要素のサイズを可変にすることで、どんな画面サイズでも快適に閲覧できることを目指しています。

PCやスマートフォンなどデバイスごとにHTMLファイルを用意する方法に比べると、制作・開発コストを抑えられる場合が多く、メンテナンスがしやすいという利点があります。
レスポンシブデザインが登場した当初は知見も少なく、デザイナー個々人による試行錯誤が繰り返されましたが、現在はレスポンシブデザインに対応したCSSフレームワークが一般化するなど、導入しやすい環境が整いました。

基本(2)viewportを設定する

レスポンシブ対応するには、meta要素の「viewport」を設定する必要があります。
「viewport」とは「表示領域」のことで、スマートフォンやタブレットでのサイトの表示のされ方を指定するメタタグです。

例:meta name="viewport" content="width=device-width,initial-scale=1.0"

【width】
viewportの横幅の指定
初期値:980px
許容範囲:200px〜10000px
「device-width」を指定するとデバイスの画面幅に合わせて表示される

【height】
viewportの縦幅の指定
初期値:横幅とのアスペスト比から計算される値
許容範囲:200px〜10000px
「device-height」を指定するとデバイスの表示領域に合わせて表示される

【initial-scale】
倍率の初期値の設定
初期値:表示範囲から計算される値
許容範囲:「minimum-scale」「maximum-scale]の範囲

【minimum-scale】
最小縮小比率の設定
初期値: 0.25 
許容範囲:0〜10

【maximum-scale】
最小拡大比率の設定
初期値:1.6
許容範囲:0〜10

【user-scalable】
ユーザーがズーム可能かどうかの設定
初期値:yes
yesでズーム可能、noでズーム不可(yes=1、no=0でも指定可)

基本(3)メディアクエリを設定する

メディアクエリとはCSS3で追加されたフィルタであり、閲覧環境に応じてデバイスの解像度、画面サイズなどを適用するスタイルに切り替える機能のことです。
メディアクエリを指定すれば、単一のファイルでもデバイスごとの表示の切り替えが可能になります。

たとえば以下のように「max-width: 320px」と指定すると、画面サイズが320px以下の場合にのみ中のCSSが適用されます。
320pxより大きい場合は適用されません。

【例】
@media screen and (max-width: 320px) {
p  {font-size: 1.1em;}
}

以下のように「min-width: 640px」と指定した場合は、画面サイズが640px以上の場合にのみ中のCSSが適用されます。
640pxより小さい場合は適用されません。

【例】
@media screen and (min-width: 640px) {
p  {font-size: 0.9em;}
}

メディアクエリは以下の属性の指定が可能です。

【max-width】
表示領域の横幅の最大幅
指定したサイズ以下の場合に適用

【min-width】
表示領域の横幅の最小幅
指定したサイズ以上の場合に適用

【max-height】
表示領域の高さの最大値
指定した高さ以下の場合に適用

【min-height】
表示領域の高さの最小値
指定した高さ以上の場合に適用

【max-device-width】
デバイス画面の横幅の最大幅
指定したサイズ以下の場合に適用

【min-device-width】
デバイス画面の横幅の最小幅
指定したサイズ以上の場合に適用

【max-device-height】
デバイス画面の高さの最大幅
指定したサイズ以下の場合に適用

【min-device-height】
デバイス画面の高さの最小値
指定したサイズ以上の場合に適用

【orientation】
端末の向きを条件にCSSを適用させる
縦置き(縦長)か横置き(横長)で指定
縦置きの場合は「orientation= portrait」
横置きの場合は「orientation=landscape」

【device-pixel-ratio】
Retinaや高解像度に対応させるためのプロパティ
デバイスが示す比率にのみ適用される
「1」は標準ディスプレイ、「2」はRetinaディスプレイを示す
例:@media screen and  (-webkit-min-device-pixel-ratio: 2)

基本(4)Retina対応のために2倍のサイズの画像を用意する

iPhone 4で初めて高精細ディスプレイである「Retinaディスプレイ」が採用されました。
「Retinaディスプレイ」は従来のディスプレイより画面解像度が高いため、そのままのサイズだとスマートフォンやタブレットで表示される画像がぼやけてしまいます。

Retina対応の高解像度デバイスに対応するには、2倍のサイズの画像を用意する必要があります。
「width」と「height」で画面上に表示する画像サイズを指定します。
モバイル端末のみに対応させるには、メディアクエリを使います。

【例】
@media screen  (max-width: 640px;){
header {
    background-image: url("logo@2x.png");
  }
}

HTML5で「img」の属性に追加された「srcset」を使い、Retinaディスプレイのみ2倍サイズの画像を適用させる方法もあります。
以下の例だと、「srcset」で指定した「logo@2x.png」がRetinaディスプレイで読み込まれ、その他のディスプレイでは通常通り「src」で指定した画像が読み込まれます。

【例】
img src="logo.png"
     srcset="logo@2x.png 2x"
     alt="logo"

基本(5)デバイスサイズを確認する


https://design.google.com/devices/

iPhone、iPad、Nexsus、Samsung Galaxy、Sony Xperiaなど、モバイル端末によってデバイスサイズが異なります。
同じiPhoneでもiPhone 4は320 × 480dp、iPhone 6 Plusは414 × 736dpとデバイスサイズが異なるため、レスポンシブデザインをするなら各端末のデバイスサイズを確認しておかなければなりません。

そのほか、Androidは種類が多いですし、機種によって普及台数に差があるのでどこまで対応するか考える必要があります。
現在レスポンシブデザインに対応しているサイトでも、最新機種がリリースされたらデバイスサイズを確認しておきましょう。

各端末のデバイスサイズは、上記サイトが見やすいです。
アスペクト比も確認できます。
※アスペクト比は「縦横比」のことで、端末によって4:3、16:9など違いがあります。


レスポンシブデザインに役立つツール

 

Google Chrome デベロッパーツール



Google Chromeの「デベロッパーツール」には、デフォルトでモバイル端末の表示画面を確認できる機能が備わっています。

メニューから「デベロッパーツール」を開き、左上にあるスマートフォンとタブレットを表したアイコンをクリックします。
すると上記のような画面になり、モバイル端末に応じて表示の切り替えができるようになります。
※表示が切り替わらない場合はリロードしてください。

ResponsiveTest


http://responsivetest.net/

サイズを指定して表示確認ができるツールです。
ヘッダー右側のアイコンからスマートフォン、タブレット、MacBook、iMacの指定ができます。

Responsive Design Testing


http://mattkersley.com/responsive/

幅、またはデバイスサイズを選ぶと、複数の画面サイズを一覧表示してくれます。
表示が横並びになっているため少しわかりにくいですが、表示に従って横スクロールしていくと他のサイズが表示されます。


まとめ

スマートフォンからサイトを閲覧するユーザーが急増しているため、デザイナーやコーダーにはレスポンシブデザインのスキルが求められるようになっています。
レスポンシブデザインに関する情報はネット上に豊富にあるので、取り組みやすいです。
これまでなんとなく避けてきてしまったという方は、この機会にレスポンシブデザインを習得してはどうでしょう。

最後に

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

単価相場算出ページへ

※相場算出に個人情報の取得はおこないません。


クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

すべての案件を見る

いきなり相談に行くのは不安な方へ

フリーランスになった時、どんな案件を提案されるのかメールでわかる!

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。