Web制作

バンコクのノマドエンジニア育成講座 iSaraレポート(レベル3-2)

今回は、バンコクのノマドエンジニア育成講座『iSara』のレポートをここに提出します。

ブログで提出というのも変な感じですが、それもOKということでせっかくなのでブログを活用します。

 

・・・そういえばこのブログでiSaraに参加したいとは書きましたが、参加が決まったとはお伝えしていませんでしたね。

その辺はまた後日書いていきたいと思います。

そしてレポートの内容ですが、AdobeのXDというソフトを使ったサイトデザインの模写を6つやり、それを通して気が付いたことをまとめるというものです。

(最初コーディングの模写が6つかと思い焦りました)

 

それでは各項目ごとにまとめていきます。

必須項目

まずはレポートに際して記入する必須項目から。

たくさんありますがまずはヘッダーから。

ヘッダー部分の共通点、特徴

ヘッダーの項目としては主に以下になります。

ヘッダーの主な項目

  • 会社のロゴ、会社名
  • メニュー(他ページへのリンク)
  • 検索ボックス
  • 言語選択(日本語⇔英語の切り替え)

 

会社のロゴや会社名、あとメニューは6つ全てのサイトに共通し、それ以外でも見ないことは恐らくないと思います。

さらに今回共通して言えるのはロゴは全て左側にあるという事。

たまに中央にあるサイトもありますが、左側にある事が大半だと思います。

そしてメニューは必然的に右側になりますが、メニューの種類が多い場合は上下に分けてメインメニューは中央下になることもあります。

 

あと高さは大体50px~100pxぐらいとなり、

全て1行で収まるなら50pxぐらい

ロゴが大きめだと100pxぐらい

メニューが多いと100pxを超えることがある

という印象です。

ヘッダーはページのメインではないので、あまり高さがあると一番見せたい部分が小さくなってしまうので要注意です。

 

あと言語選択は多くはないですが、外国人が見に来そうなサイトにあることが多いです。

 

コンテナのサイズについて

ページの幅ではなく、内容が入る幅のことですね。

コンテナの幅は画面いっぱいとは限りません。

というか画面幅いっぱいだと大きいモニターで見ていると見難いです。

なので背景色や背景画像以外のテキストや画像などはある程度幅を狭くして、左右に余白を作ると見やすくなります。

 

今回模写したサイトの各コンテナ幅は以下の通り。

1120px 1600px 1152px 1220px 1024px 1080px

大体1000pxちょっとになります。

他のサイトも恐らく1000px前後が多いと思います。

 

その辺については以下のサイトが参考になります。

WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~ | Web制作会社SERENDEC

 

うちのモニターだと1920pxあるので、もしテキストや画像が幅いっぱいに広がると見難くてそういうサイトを開いた時は内容も見ずに閉じてしまうことがあります。

そのくらいコンテナの幅は重要なので、その辺を意識してデザインをしていきましょう。

 

画像の共通点や特徴

これについては模写をする前から分かっていましたが、画像は基本的に横が多いです。

もしくは正方形に近い形ですが、縦の画像はほとんどありません。

それは今回の模写でも同じでした。

それじゃなんで知っていたかというと、ホームページ用の撮影やWebマガジンの撮影をするときに、

『縦の写真は使いにくいからなるべく横で撮ってほしい』

と言われるからです。

なのでWebマガジンの撮影では全て横構図で撮っています。

『ここは縦構図の方がいいんだけどなぁ』

と思う事もありますが仕方ありません。

そこは横でも上手く撮るように頑張ります。

 

色の特長

色についてはそれぞれのサイトでイメージカラーがある場合はその系統の色で合わせるようにしている。

例えば歯科関係のホームページであれば爽やか、安心などのイメージがある青系

ただ青系と言っても1色ではなく2,3色使っている。

少しバリエーションは増やすけどイメージカラーはそのままという感じ。

 

ここで黄色など違う系統の色も沢山使うとバランスが悪くなるので、ボタンはこの色、テキストはこの色などパーツによって統一しているサイトが多い

そして今回模写したサイト以外にも言えると思うけど、原色はあまり使わない。

理由としては色がキツイから。

今回模写したサイトで見出しに赤系を使っていたところがあったけど、原色である#ff0000ではなく、#e7001dなど少し変えている(コードだけ見ても良く分からないと思いますが・・・)

黒や白などについても#000や#fffにするのではなく、#232323や#fafafaにして少し柔らかい目に優しい感じにします。

これはポートフォリオを作るときにも意識していたところです。

(ちなみにこのブログの周りのグレーっぽい所が#fafafaです)

また色の種類については以下のサイトが参考になります。

WEB色見本 原色大辞典 - HTMLカラーコード

 

テキストのサイズ、間隔、文字数の共通点

テキストのサイズについては今回模写したサイトでは、

見出しは24px~44px

テキストは12px~16px

といった感じ。

テキストで10pxは滅多にないと思うけど、以前メンターさんから貰ったカンプのテキストが1pxになっててこれは試されているのか?と思ったことがあります。

当たり前ですがテキストより見出しが大きいというのが基本ですね。

 

間隔については狭すぎても広すぎても見難くなるから無視できない項目です。

今回模写したサイトは全てちょうどいい感じになっていました。

これについては以下のサイトが参考になります。

【CSS】letter-spacingで字間を調整する方法まとめ

 

文字数については見出しは全て2行までになっていました。

見出しはタイトルなので、なるべく簡潔にして分かりやすい内容にしたいですね。

テキストは1つの文章では多くても5行分でした。

テキストも長々と書くのではなく、少しずつ区切ってまとめた方が見やすくなりますね。

 

フッターの共通点

フッターは今回模写した6サイト中、5サイトは白系か灰色系でした。

やはりここはページの最後でメインではないので、控えめな感じが多いです。

ちなみに残りの1サイトはイメージカラーだったので違和感はありませんでしたが、もしイメージカラーが青系なのに最後のフッターだけ赤系だとしたら凄い違和感があると思います。

あとはロゴやヘッダーには収まりきらなかった各リンクのメニューがある場合が多く、メニューが多い場合は結構高さ(height)が高くなることがあり、ここはヘッダーと比べると差が大きいですね。

 

セクション間の縦間隔の特長

セクション間には50px~100pxぐらいの縦間隔があるが、今回模写したサイトを見るとその他にも薄い灰色の線を間に入れたり、セクションごとに背景色や背景画像を入れているところがあった。

特に背景色や背景画像で区切られているとぱっと見で項目が変わっているんだなと分かりやすい。

ちなみに自分のポートフォリオもセクションごとに背景色を黒系、灰色系と交互に入れています。

 

セクション内の要素の横間隔の特長

セクション内の要素間はどのサイトも大体20pxぐらいで、余白は必ず入っている。

例外として画像同士を横一列につなげてスライドショーみたいにしているサイトがあったが、基本的に要素間は縦も横も余白は必ず入れ、どのくらい余白を入れるかを考える必要がある。

 

2カラム、3カラム、4カラムの時の1カラム分の幅の特長

ほとんどの要素がコンテナ幅いっぱいになるように且つ適度な余白が出来るように均等に配置されているが、SNSのアイコンなど小さいものが複数ある場合はコンテナ幅いっぱいだと大きすぎて不自然になるので、コンテナ幅の半分ぐらいの幅を中央にして、その中にアイコンを5つ均等に並べるといったサイトもあった。

あとは全部で5つ要素があり、3つは1列目、残り2つは2列目といった場合は、1列目はコンテナ幅いっぱいになるようなサイズで、2列目は1列目と同じサイズ&余白で中央配置というサイトもあった。

これは2列目もコンテナ幅いっぱいにしてしまうと1列目とはサイズが異なってしまい、2列目の方が大きくなって1列目より重要っぽく見えてしまうからだと思う。

(2列目を推したいならいいかも知れないが)

 

その他、気付いた点など

XDは少し使ったことがあったけど、今回の模写で便利だと思った機能をご紹介。

スポイト

これは背景色だけでなく境界線やテキストも可能。

 

ボックスを選択 ⇒ スポイト(塗り)をクリック ⇒ 欲しい色クリック

⇒ ボックスの背景色がその色に。

 

ボックスを選択 ⇒ スポイト(境界線)をクリック ⇒ 欲しい色クリック

⇒ ボックスの境界線がその色に。

 

テキストボックスをダブルクリック ⇒ スポイト(塗り)をクリック ⇒ 欲しい色クリック

⇒ テキストがその色に。

 

コンポーネント

例えば使いまわし出来そうなボタンなどをCtrl(cmd)+Gでグループ化

そしてそれをクリック選択してCtrl(cmd)+Kでコンポーネント

XD画面左下にある3つのアイコンの上のアイコンを選択し、コンポーネントにグループ化したボタンを確認

あとはそれをドラッグ&ドロップすればボタンが配置される

もちろんボタン以外にも使えるので、同じデザインのものがあったらコンポーネントしておくのが吉

 

画像の縦横比を固定

画像のサイズを変えようとしたとき、画面右のWの数値を変えると幅が変わり、Hを変えると高さが変わるが、その横のカギマークが外れている状態だと縦横比が変わってしまうので、固定した場合はカギマークをクリックして施錠する。

これは非常に良く使う。

 

GoogleフォントをAdobe XDで使う

模写しているとXDに使いたいフォントがない場合がある。

それがGoogleフォントであれば以下のサイトを参考にすれば使うことが出来る。

 

Page Ruler Redux(chromeの拡張機能)

Page Ruler Reduxを使うと画面上で定規を使って余白や要素のサイズを測れる。

デベロッパーツールで調べられない時に役に立つ。

 

What Font(chromeの拡張機能)

フォントのサイズ、色、行の高さ、太さ、種類などが分かる。

ただしホバーした時に色が変わると変わった後の色を取得するから注意。

 

以上になります。

長々と失礼しましたm(__)m

-Web制作