アーカイブ: コラム

PCサイトのコーディングを終えてからレスポンシブ対応を進める時、「そういえばここは◯◯にしなきゃいけないんだった…」とつい忘れがちだけど、重要なポイントってありますよね？あらかじめ注意すべきポイントを抑えておけば、手戻りが発生することなく効率良くコーディングすることができます。

今回はレスポンシブサイトのコーディングで、忘れてしまいがちだけど考慮すべきポイントについてご紹介します。

1. 見出しの行間指定

レスポンシブ対応で忘れがちなポイントの1つが見出しの行間指定です。PCサイトでは１行に収まっていたテキストが、SPサイトでは改行されることが多々あります。その時にline-heightの指定が適切に指定されていないと、行間が狭すぎたり広くなり過ぎたりと、読みづらくなってしまいます。

見出しの行間はSPサイトでの改行を踏まえて設定しておきましょう。

2. レスポンシブの改行位置

PCサイトではキレイに文字組みされていたキャッチコピーや見出しが、SPサイトではブラウザ幅に応じて改行されてしまうのは、ちょっと見栄えがよろしくありません。

brタグにclass=”sp-br”などのクラスを付与して改行位置を調整するのもありですが、このやり方ではまだ崩れてしまう可能性があります。キレイに改行させたいテキストをspanタグで囲い、inline-blockを適用しましょう。

3. flexのspace-betweenの最終行

新着記事などの一覧表示に使われるカードレイアウトをコーディングする際、要素をきりの良い数字で作成するとdisplay: flexとjustify-content: space-betweenで作りがちです。しかし、1行3列のレイアウトに要素が４〜５つしかなかった時、、最終行の要素は左寄せではなく両端寄せになってしまいます。justify-content: flex-startと指定しましょう。

4. 改行される要素の高さ指定

見出しに限らずレスポンシブ対応で文字が改行されてしまう箇所は多いです。お問い合わせフォームでよく使われるラベルやボタンなどにheight指定をしていると、SPサイトでは枠からテキストがはみ出てしまうことが良くあります。高さはpaddingで調整するようにしましょう。

5. アスペクト比が異なる画像に対応

「お知らせ」などCMSでクライアントが管理する投稿コンテンツは、デザイン上想定していたアスペクト比とは異なる画像が使用される可能性があります。その際にoverflow: hiddenを設定していないとレイアウトが大きく崩れてしまいます。
投稿コンテンツの画像エリアにはoverflow:hiddenを忘れないようにしましょう。

6. transitionで予期しないアニメ―ション

hover時に滑らかなアニメーションを指定する際、深く考えずにtransition: allを設定していると、幅を縮めた時に予期しないアニメーションが発生することがあります。アニメーションさせるつもりのないプロパティがtransition: allの指定によって、すべてアニメーションになっているのが原因です。面倒臭がらずにtransition : opacity 0.3, transform 0.3 とアニメーションさせたいプロパティを指定しましょう。

おわりに

コーディング業務で指定が漏れてしまいがちなポイントについてまとめてみました。

デザインからコーディングをする際に、常に理想の状態（文字数や画像サイズ）を前提としたコーディングをしていると、このような落とし穴にはまってしまいがちです。Webデザイナーとしては実際の運用を常に見越して、あらかじめ注意すべきポイントを抑えたコーディングを心がけましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

サイト制作を行うWebデザイナーは、仕事で写真を撮ることはなくても写真データを扱う機会は多々ありますよね。

クライアントから提供された写真素材をそのままの縦横比で使用することは少なく、大抵はサイトに合わせて適宜トリミングすることが多いのではないでしょうか。

Webデザイナーとしてデザインを左右する写真を適切に扱うためにも、写真の構図を理解し効果的に使えるようになりましょう！

写真の重要性

写真が与える印象は文字より大きいと言われています。そのため写真をパッと見て3秒以内に興味を持たれなければ内容まで見てもらえないこともしばしばです。

逆に写真がサイトやテキストの内容と一致しており、適切に扱えている場合には流し読みや飛ばし読みが容易になるため読まれやすいとも言われています。

「その写真で何を伝えたいのか」「見せたいポイントはどこなのか」を考えて使うこと、その上で「見せたいポイント」に注目させる構図とはどのようなものか、サンプルの写真を交えて紹介したいと思います。

基本的な構図

1. 三分割構図

写真を縦横に三分割して、その線や交差する点に被写体や要素を配置する構図です。

オーソドックスでバランスの良い配置となる定番構図で、感情や関係性、全体を表現しやすいとされています。

2. 二分割構図

写真を縦もしくは横の二分割にする構図です。

色や奥行きが分かれているときに使いやすく、境界線をはっきりと出せることでシンメトリーのような美しさを表現することができます。

3.日の丸構図

被写体を中央に配置する構図です。

被写体を目立たせ、ストレートに捉えられることが特徴です。そのシンプルさゆえに力強い印象にもなれば、つまらない印象にもなりやすいので使い方のバランスが大切です。

4.放射線構図

ある一点から放射線状にひろがっていくような構図です。

遠近感や奥行き感を強調することができます。放射線の消失点に被写体を配置すると視線誘導にも有効です。

5.対角線構図

対角線上の線に境界を配置したり、被写体を乗せる構図です。

２つの被写体を見せたい場合、横並びよりも対角線上に置いたほうがバランスが取れた写真になります。

6.トンネル構図

枠となる風景の中にメインの被写体を置く構図です。

被写体に視線が集中しやすくなるため、より印象的に見せることができます。

おわりに

写真や素材の使い方・見せ方については「なんとなく良い」の主観も大事にしつつ、「なぜその配置にしたのか（切り取ったのか）」説明できる知識や目線を養っていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

inputタグであれば「選択してください」の文字色を変えたいときcssで簡単に色を変更できます。
しかし、セレクトボックスはcssで色の変更をすることができず、プレースホルダーを設定することもできません。そこで今回はセレクトボックスの初期値の色を変える方法をご紹介します。
とても簡単に変えることができるので、ぜひ試してみて下さい。

1. セレクトボックスとは

ボックスをクリックすると選択項目が複数出てくるフォームタグの一種です。

選択サンプル１サンプル２サンプル３

2. 完成サンプル

「選択」の文字は実際に選択肢に入ってないので、グレー色にします。
サンプル１を選択した際は、赤色で表示されます。

選択サンプル１サンプル２サンプル３

3. コード紹介

3-1. htmlファイルを用意する

重要なポイントは、selectタグにonchange属性をつけることです。onchange属性はselect要素の属性が変わったときに起動します。

<select name="sample" onchange="Color(this)" required>
 <option value="" disabled selected>選択</option>
 <option value="2">サンプル１</option>
 <option value="3">サンプル２</option>
 <option value="4">サンプル３</option>
</select>

ページをひらいたときの最初の色を指定します。

select{
 color: grey;
}

onchangeで属性が変わった際にvalueが0以外は文字色がredになるように指定します。

function Color(sample){
 if( sample.value == 0 ){
  sample.style.color = '';
 }else{
  sample.style.color = 'red';
 }
}

おわりに

今回はセレクトボックスの初期値の色を変える方法を紹介しました。
細かい所ですが、ユーザビリティに直結する大事な部分です。
html、cssだけでは修正できず少し面倒ではありますが、やり方さえ分かってしまえば簡単に変更することが可能なので、この記事を参考に少しでも業務の役に立てていただけたら幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

誰でも無料で使用できて商用利用も可能な「Google Fonts」。もはやサイト制作では必須のWebサービスですよね。一つのサイト内でも日本語用フォントと英語用フォントを使い分けることで、サイトの雰囲気はガラリと変わります。Webデザイナーなら上手く活用したいところです。

しかし今現在、Google Fontsに登録されているフォントの数は1000種類以上あります。日本語フォントはまだ数が少ないものの、英語フォントは数が膨大なのでサイトの雰囲気にあったものを探し出すのは困難です。

そこで今回は、Web制作の現場でよく使われているオススメのGoogleフォントをご紹介します。ただフォントを羅列しても、どういう系統のサイトに使えるのかわからないので、それぞれの特長やシーン等を交えつつ紹介したいと思います。

1. Lato

スタイル：10種類

シンプルでクセのないフォントです。スタイルの種類も豊富で、どんな系統のサイトにも適応できる安定感があります。「6」「7」「9」といった数字がシンプルで読みやすいので、お問い合わせの電話番号がコンバージョンとなるサイトに使用すると効果的です。大文字の「Q」のヒゲが可愛いですね。

[ Latoはこちら ]

2. Roboto

スタイル：12種類

Googleのデザイナーが開発したフォントです。Androidのシステムフォントとしても使われているので、シンプルながら非常に洗練されていて読みやすいです。スタイルが12種類と豊富なので、このフォント1つでデザインにコントラストをつけることができます。

[ Robotoはこちら ]

3. Montserrat

スタイル：18種類

デザインアイデアのインプットのため、毎日色々なサイトを回遊していますが、ここ最近もっとも多く目にするのが「Montserrat」です。キービジュアルのコピーや見出しでよく使われています。大文字の頭でっかちな「R」が可愛げがあって好きです。インパクトを出したいが固くなりすぎず、可愛らしさも演出したい時にオススメです。

[ Montserratはこちら ]

4. Poppins

スタイル：18種類

こちらも最近のコーポレートサイトでよく見かけるフォントです。大文字と太字のセットで使われていることが多いです。「O」や「C」が丸く、力強さの中にも可愛げがあるので、少し遊び心を演出したい時にオススメです。読みやすいフォントなので、見出しとしても本文としても使えます。

[ Poppinsはこちら ]

5. Rubik

スタイル：14種類

角に少し丸みを帯びた柔らかい印象のフォントです。くだけすぎるのは良くないが、少し柔らかい印象にしたい時にオススメです。柔らかくて読みやすいので、子供向けにも大人向けのデザインにも使えます。最近、実際のデザイン業務で使ってみて、その使い勝手の良さを実感したフォントです。

[ Rubikはこちら ]

6. Oswald

スタイル：6種類

縦長でスタイリッシュな印象のフォントです。文字数が多くてもスペースを大きく取らないため、グローバルナビゲーションや見出しに重宝します。大文字で書くとまとまり感があり、レイアウトがしやすいためキービジュアルのコピーとしても使いやすいです。

[ Oswaldはこちら ]

おわりに

今回はWeb制作でよく使われている定番のGoogleフォントを紹介しました。

今まで日本語フォントは考慮していたけど、英語用フォントは深く考えたことがなかった…という方はぜひ今回紹介したフォントをお試しください。メールアドレスや電話番号のフォントが変わるだけでも、デザインが引き締まることを実感できます。ただし、Google Fontsは使用しすぎるとサイトの表示速度が遅くなってしまうので、使いすぎには注意しましょう。（過去記事参照）

Google Fontsには今も新しいフォントが続々と追加されています。（この記事を書いている数日前にも、日本語フォントが大量に追加されました）Google Fontsを活用してWebデザインの表現の幅を広げていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

使っている方も多いブラウザ「Chrome」ですが、拡張機能をいれるともっと使いやすくなります。
今回は、日々のデザインワークや業務をする上で私が実際に使っている拡張機能をご紹介します。

1.すべての人におすすめの拡張機能

1-1. FireShot

見ているページの全体をスクショする拡張機能です。縦に長いLPやWebサイトをスクショしたいときに使用します。

1-2. Moly Cropping Search

選択した部分を画像検索してくれる拡張機能です。似たような画像を探している場合に役立ちます。

1-3. Weblioポップアップ英和辞典

英語にマウスをかざすとすぐに日本語訳が表示される拡張機能です。

1-4. ブックマークサイドバー

ブックマークがサイドバーとなって表示されるので、とても見やすくなります。

1-5. Ubersuggest

SEOツールとして使える拡張機能です。検索ボリュームや競合キーワードが表示されます。

2.Webデザイナーにおすすめの拡張機能

2-1. ColorPick Eyedropper

見ているページの色のカラーコードを知りたいときに使用します。色が知りたい部分にマウスポインターをかざすだけでカラーコード情報がわかります。

2-2. Image Downloader

ページ内で使用されている画像を一括ダウンロードできる拡張機能です。個別に画像をダウンロードしたり、新しいタブで画像を開いたりもできます。

2-3. WhatRuns

見ているページに使用されているCMSやWebフォントなどの情報がわかる拡張機能です。

2-4. WhatFont

フォントの種類が知りたいテキストにマウスポインターをかざすと、フォント名がわかります。

2-5. Page Ruler Redux

幅を測りたいときに便利な拡張機能です。測りたい箇所をドラッグすると数値がわかります。

おわりに

今回は私が使用している拡張機能の中で特におすすめのものを紹介しました。この記事を参考に少しでも日々のデザインワークや業務の役に立てていただけたら幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。