HOME > FEATURES

FEATURES

features_013


 

特徴やフローを横に並べるブロックで数字の表示に工夫

数字はリードに設定しCSSで調整しています。また、数字の次の英語、日本語見出しについては数字の位置に重なるように設定しているため、数字と文字が重なったときの可読性を確保できる色の設定もCSSでできるようにしています。
 
MORE

features_012


 

特徴や項目が横に並ぶブロックで、詳細へのリンクの位置が揃う設定

文字数によってリンクボタンの位置が揃わないとなんかスッキリしません。
文字数の違いをカラの改行で揃えようとすると、閲覧しているデバイスやOSなどの環境による微妙なズレ(句読点一つが改行されて揃わないなど)を解消するのが困難です。
 
MORE

features_011


 

小見出しをCSSで画像に重ね、Font Awesomeによるアイコンを付けています

3つの特徴をそれぞれ箇条書きで表したい時に使えそうなブロック。
トップページの目立つ場所ではBiNDで普通のリストにするとシンプルな黒丸で地味な印象になりがちなので、ブロック内にFont Awesomeのstyleを入れてあります。
 
MORE

features_010


 

4コマで説明するようなとき、そのブロック背景にトーンを濃くしたイメージを敷いたレイアウト

ブロックにアクセントとして背景に色を付けるようなとき、色ではなく画像を指定したパターン。並べている画像と文章がメインなので、画像はトーンを濃くして背景としています。
 
MORE

features_009


 

カラムごとに背景色を指定し、写真は余白なしで大きく表示

カラムごとに背景色を指定したパターン。写真はカラムいっぱいに表示して、文字情報だけを余白があるようにCSSで設定しました。
 
MORE

features_008


 

リンクをテキストへ設定したFEATURES

画像とテキスト(小見出し、本文)という組み合わせを横に並べたレイアウト。画像へはリンク設定をしないで、本文下に「READ MORE」というリンクテキストを配置しています。
 
MORE

features_007


 

スマホでは画像に対して回り込み設定にしたレイアウト

カラムwidthの設定はなしの3分割。文字数が多い時にはスマホではこのようなレイアウトになるよにCSSで設定してみました。スマホでご覧いただくか、ブラウザのウィンドウ幅を640px以下に縮小してみてください。
 
MORE

features_006


 

横に並ぶ画像は間隔をゼロにして大きく表示しカラムを線で囲う設定

カラムwidthの設定はなしの3分割。カラムの感覚をゼロにして横に並ぶ画像をひっつくように配置。さらにカラムを線で囲う設定。文字情報は小見出しと本文に設定し、小見出し・本文に対してcssで左右の余白を設定。スマホでは1カラムにし、画像はスマホウィンドウ幅いっぱいに表示する。
 
MORE

features_005


 

横に並ぶ画像は間隔をゼロにして大きく表示。文字情報だけをCSSで余白設定したパターン

カラムwidthの設定はなしの3分割。カラムの感覚をゼロにして横に並ぶ画像をひっつくように配置。文字情報は小見出しと本文に設定し、小見出し・本文に対してcssで左右の余白を設定。
スマホでは1カラムにし、画像はスマホウィンドウ幅いっぱいに表示する。
 
MORE

features_004


 

カラムごとに上下にずらした変則パターン

カラムwidthの設定はなしの5分割。スマホレイアウトでは2列表示。カラム1、3、5ではpadding-topで上に余白を入れてずらしたレイアウト。各項目で説明文の文字数が少なくシンプルなアイコンを並べるときの提案。
マウスオーバーの動きはcssで設定。
 
MORE

features_003


 

パソコンは3カラム、スマホでは1カラムのアイコンを使ったパターン

カラムwidthの設定はなしの3分割。スマホレイアウトでは1列表示。シンプルなアイコンをSiGNで作る丸枠の中に読み込み、丸枠にはsignで影をつけています。
SiGNで作成した枠にアイコンを読み込んでフィット表示。マウスオーバーの動きはcssで設定。
 
MORE

features_002


 

パソコンは4カラム、スマホでは2カラムの基本的な設定

カラムwidthの設定はなしの4分割。スマホレイアウトでは2列表示。カラム3、カラム4のpadding-topに余白を設定。各項目で説明文の文字数が少ないときスマホでは2カラムが可能。
 
MORE

features_001

 

パソコンは3カラム、スマホでは1カラムの基本的な設定

カラムwidthの設定はなしの3分割。スマホレイアウトでカラム2、カラム3のpadding-topに余白を設定。各項目で説明文の文字数があるときスマホでは1カラムが読みやすい。
 
MORE