たねっぱ！ » デザイン

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #２

futappa_staff — Sun, 06 Jun 2021 01:07:26 +0000

はじめに

実在するサイトを例に、見出しの使い方とデザインを学びましょう♪

今回もキュレーションサイトで見つけた１サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「BabySong」という、お子様の声を使って音楽をオーダーメイドする、新しいギフトサービスだそうです。ロゴは子供らしい可愛いロゴですが、サイト内の見出しはゴシックで見やすくデザインされていました。では早速、見出しデザインを見ていきましょう。

h1タグ

トップページのロゴ部分

下層ページのメインタイトルの部分

h2タグ

トップページのメインビジュアルのすぐ下の部分

「SAMPLE MUSIC」のセクションは、複数のページにありました。

h3タグ

まとめ

いかがでしたか？全体的にシンプルな見出しを使っているサイトでしたが、文字サイズなどで上手く調整されていると思います。色んなパターンのサイトの見出しに着目するのも勉強になりますね(^^)

参考サイト

BabySong | こどもの声でつくる世界に一曲のオーダーメイド音楽ギフト

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #１

futappa_staff — Wed, 16 Dec 2020 09:28:27 +0000

はじめに

色々なサイトを例に、各見出しの使い方とデザインを学びましょう！

今回はキュレーションサイトで見つけた１サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「株式会社アスカフューネラルサプライ」という葬儀施設運営、仏壇仏具販売をされている会社だそうです。綺麗に魅せているサイトだと思ったので、使わせていただきました(^^)
では早速ですが、各見出しをみていきましょう。

h1タグ

トップページのロゴ部分

h2タグ

トップページ・下層ページ両方で使われていました。

下層ページに、先ほどのよこバージョンもありました。

h3タグ

全ページ共通コンテンツの部分です。

会社案内のページで、理念などを掲載している部分です。メッセージ性のある大事な部分なので、他ページとは違う見せ方をしていました。

h3・h4タグ

まとめ

いかがでしたか？なんとなくデザインを見るだけでなく、共通の見出しを探したり、hタグのレベルはどうなっているのか？など気をつけて見るのもとても勉強になります！こういう習慣もつけていきたいですね♪

参考サイト

株式会社アスカフューネラルサプライ｜新宮公益社

メインビジュアル14選！変わった形のデザインパターン♪

futappa_staff — Wed, 09 Dec 2020 02:24:49 +0000

ファーストビューの印象に影響するメインビジュアル。四角形だけではなく、いろんな形デザインを見かけるので、集めてみました。メインビジュアルを作る参考になれば幸いです。

採用情報｜株式会社ネットサービス・ソリューションズ
クリオ訪問看護・リハビリステーション
Rand | 神谷直広 / NAOHIRO KAMIYA
一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織
Get the Picture by InsideJapan Tours
世田谷フルート教室　Setagaua Flute School
大阪大学産業科学研究所先端実装材料菅沼研究室
ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館
株式会社クルイト
SUBARU健康保険組合太田記念病院看護部サイト
DAW Studio　アオイウミト、－ボーカル収録・ボイス収録
シャトー酒折ワイナリー | CHATEAU SAKAORI
岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）
最後に

いろんなパターン

採用情報｜株式会社ネットサービス・ソリューションズ

クリオ訪問看護・リハビリステーション

クリオ訪問看護・リハビリステーション｜「らしさ」に寄り添い、「らしく」を支える。

Rand | 神谷直広 / NAOHIRO KAMIYA

丸い形が自由に変形しているのがとても印象的です！とてもナチュラルな動きで、つい見てしまいます。

一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

Get the Picture by InsideJapan Tours

別ページへ移動するときに、丸い背景の拡大する動きがいい感じです。

世田谷フルート教室　Setagaua Flute School

大阪大学産業科学研究所先端実装材料菅沼研究室

ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館

株式会社クルイト

メインビジュアルもそうですが、サイト全体を通して流体シェイプがたくさん使われています。

SUBARU健康保険組合太田記念病院看護部サイト

DAW Studio　アオイウミト、－ボーカル収録・ボイス収録

普通の四角形じゃないだけで、印象が変わりますね。

シャトー酒折ワイナリー | CHATEAU SAKAORI

岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）

最後に

いかがでしたか。参考になれば幸いです♪

メインビジュアル20選！スライドや動画になっているパターン♪

futappa_staff — Mon, 30 Nov 2020 08:24:20 +0000

今回は、スライドショーや動画になっているメインビジュアルを集めました。なるべく変わったデザインのもので、参考になりそうものを集めています。

江戸東京きらりプロジェクト
あとリノ育てていく住まい | リノベーションの株式会社リビタ
どんぐり｜札幌の焼きたてパンの店
【東京イラストレーターズ・ソサエティ（TIS）】Tokyo Illustrators Society
浦野歯科診療所 | 大阪、堂島の歯医者
山形県立産業技術短期大学校 | 山形県立産業技術短期大学校ホームページです。地域の即戦力となる学生を養成します。
倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts
TAGUCHi | ガジラ(GUZZILLA) | 土木解体アタッチメント | タグチ工業
株式会社ベンチマーク｜読売新聞京葉地区No.1
滋賀県近江八幡市に根差す歯医者 – クラウド歯科 CLOUD DENTAL CLINIC
ヒノヨコ.com|名古屋の子育てはじめてのひよこママへ
共栄製茶株式会社
春日市白水ヶ丘の内科｜ながの内科
江戸川区瑞江の内科・循環器内科｜つちだクリニック
Matsue Group 採用サイト
TAPUKO THE GAMA | タッコにんにくを使用したマヨネーズタイプのドレッシング-タプコザガマ
株式会社OS工芸社
わかば保育園｜大阪府羽曳野市にある企業主導型保育園
株式会社ジェイアール東海高島屋新卒採用ページ
スプレディ株式会社［Spready Inc.］
最後に

動画・スライドになっているパターン

江戸東京きらりプロジェクト

右側の写真が、ふわっと（もやもやっと？）切り替わります。雰囲気のある切り替え方だと思います。

あとリノ育てていく住まい | リノベーションの株式会社リビタ

リノベーション会社らしく、家のモチーフを使っています。よくある左右に写真がスライドするのではなく、３枚の写真がいっぺんに切り替わります。

どんぐり｜札幌の焼きたてパンの店

パンみたいなふっくらしたモチーフになっています。吹き出しのコメントが、アクセントに動いていて可愛いです。

【東京イラストレーターズ・ソサエティ（TIS）】Tokyo Illustrators Society

「ＴＩＳ」というシルエットの向こうで、いろんな画像が右から左へスライドしていきます。

浦野歯科診療所 | 大阪、堂島の歯医者

図形が自由に変形していくのが目を引いて、いい感じだと思います。写真はスライドショーになっています。

山形県立産業技術短期大学校 | 山形県立産業技術短期大学校ホームページです。地域の即戦力となる学生を養成します。

倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts

たくさんの写真や動画がが切り替わっていく動きも可愛いらしいと思います。

TAGUCHi | ガジラ(GUZZILLA) | 土木解体アタッチメント | タグチ工業

株式会社ベンチマーク｜読売新聞京葉地区No.1

滋賀県近江八幡市に根差す歯医者 – クラウド歯科 CLOUD DENTAL CLINIC

歯科らしく、歯のシルエットになっています。

ヒノヨコ.com|名古屋の子育てはじめてのひよこママへ

共栄製茶株式会社

春日市白水ヶ丘の内科｜ながの内科

建物のシルエットに合わせた形が印象的で素敵です。

江戸川区瑞江の内科・循環器内科｜つちだクリニック

Matsue Group 採用サイト

TAPUKO THE GAMA | タッコにんにくを使用したマヨネーズタイプのドレッシング-タプコザガマ

株式会社OS工芸社

わかば保育園｜大阪府羽曳野市にある企業主導型保育園

画像がスライドするときのエフェクトが印象的でした。

株式会社ジェイアール東海高島屋新卒採用ページ

スプレディ株式会社［Spready Inc.］

流体シェイプがふよふよ変形していて、動画がながれます。

最後に

いかがでしたか。参考になれば幸いです♪

メインビジュアル7選！ロゴがモチーフになっているパターン♪

futappa_staff — Wed, 25 Nov 2020 04:21:41 +0000

ファーストビューの印象に影響するメインビジュアル。今回はロゴをベースにデザインされているものを集めてみました。

株式会社オーセン｜マーケティングテックカンパニー
岐阜の高気密高断熱住宅の工務店｜エムズアソシエイツ
松本市・岡谷市の工務店・ハウスメーカー｜ナガノテクノス
なないろサーカス団 | なないろの架け橋をつくるアートカンパニー
一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック
K-MIX – 株式会社ケイミックス
株式会社Leo Clie
最後に

ロゴの形がモチーフになっているパターン

株式会社オーセン｜マーケティングテックカンパニー

波打つように出てくるタイトルがいい感じです。背景のロゴマークのシルエットは動き回っていて、ほどよいバランスだと思います。

岐阜の高気密高断熱住宅の工務店｜エムズアソシエイツ

ロゴの「M」の形にしているのかなと思います。スライドになっています。

松本市・岡谷市の工務店・ハウスメーカー｜ナガノテクノス

工務店・ハウスメーカーらしく、家の形になっています。また、ロゴといい感じに合わせています。

なないろサーカス団 | なないろの架け橋をつくるアートカンパニー

ロゴマークにあるテント部分がうまく使われています。

一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック

K-MIX – 株式会社ケイミックス

ロゴモチーフの部分に、動画が流れていくのが印象的です。

株式会社Leo Clie

最後に

いかがでしたか。いろんなパターンを見て、デザインの引き出しが増えたら幸いです♪

コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

futappa_staff — Fri, 30 Oct 2020 00:50:36 +0000

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない
不要なレイヤーは削除する
セクション・パーツごとにグループ化する
レイヤー名は関連する名前にする
通常時・ホバー時のデザインをわかりやすくする
レイヤーをロックしない（場合による）
最後に

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。

不要なレイヤーは削除する

非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。

２、パーツ系は、まとめてグループにする

例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ１つのグループとしてまとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されているとまるごとアセット書き出しもできて便利です！

レイヤー名は関連する名前にする

「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。

通常時・ホバー時のデザインをわかりやすくする

ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。

レイヤーをロックしない（場合による）

あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。

最後に

レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪

コーディングしやすいデザインデータの作り方 ★Part２（テキスト編）

futappa_staff — Mon, 19 Oct 2020 01:18:57 +0000

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、テキスト周りの内容を中心にまとめました。

文字数が増減しても大丈夫なレイアウトにする
文字サイズは整数にする
デバイステキストで改行（brタグ）がいらないところでは、任意改行しない
文字の体裁を統一する
文字は最低でも10px以上にする（2倍デザインなら20px以上）
最後に

文字数が増減しても大丈夫なレイアウトにする

１行のときは大丈夫だけど、これが複数行になったらどうなるんだろう？と考えてしまうこともあります。どちらでも対応できるレイアウト、もしくは参考デザインが用意されているとよりスムーズです。

文字サイズは整数にする

ブラウザごとに小数点の扱い方が違うので（切り捨て、切り上げなど）、表示が異なってしまいます。

デバイステキストで改行（brタグ）がいらないところでは、任意改行しない

画像内の左の例ですが、手動で改行したテキストをエディターに流し込むと、改行された状態で貼り付けられます。そのため、まずは改行を消す作業が必要になります。
また、本当に改行は必要かもしれないという部分もあるときに、混乱してしまう可能性があるため気をつけましょう。

文字の体裁を統一する

フォント・サイズ・行間・ウェイトなど、同じレイアウトは体裁を揃えましょう。少し違うのがあると、あえてなのかミスなのかわからない場合があるため。

文字サイズは最低でも10px以上にする（2倍デザインなら20px以上）

スマホのデザインデータでよくありましたが、2倍サイズのデザインのはずが文字サイズ10pxという…。これ実装できたとしても5pxになるので読めませんよ（；；）という悲しいことになるので、気をつけましょう。

最後に

いかがでしたか。会社によりやり方が違う場合もあるかと思いますので、不安なところはコーダーさんに確認されると良いと思います。細かい事ばかり書いていますが、参考になりましたら幸いです。

コーディングしやすいデザインデータの作り方 ★Part１

futappa_staff — Thu, 15 Oct 2020 01:37:22 +0000

デザインとコーディングの両方をするようになって気づいたこともあり、コーディングをしないデザイナーへ向けてポイントをまとめました。
※フォトショップをベースにお話しますが、イラレのことも少し書きます。

今回は、デザインを作り始める入る前に知っておきたいポイントを中心にまとめました。

カラーモードはRGB

モニターはRGB（赤緑青の三原色）で表示しているのに対し、印刷物はCMYKです。詳しい説明は省きますが、表示できる色数が違ので途中でCMYKからRGBに変更すると色味が変わってしまうので、必ずはじめに設定しておきましょう。

新規作成の画面

単位はpx(ピクセル)

モニターはpxで表示しているためpxにしましょう。mmやptなどで作ると、pxに変換したり小数点が出てしまうなど作業が増えてしまいます。

Photoshopの環境設定

上部メニュー内の環境設定から、pxに設定しておきましょう。

実寸サイズで作る

PCは実寸サイズ、SPは倍サイズなどで作りましょう。
※もちろんRetina対応ならそれに対応したサイズで。

画面サイズそのまま（iphone7なら375px）で作ってしまうと、倍サイズで画像書き出さないといけなかったり、そのときに画像サイズが足りなくて荒れてしまう…なんて悲劇もあるかもしれないので、お気をつけください。

整数を使う

特にIllustratorのデータで多かったのですが、座標やオブジェクトのサイズに小数点がついてるのがありました。
小数点を使うと、オブジェクトの端がぼやけてしまったり、書き出しのときに「切り上げ or 切り捨て」によりサイズがずれたり、スライスに時間がかかってしまいます。イラレを使うときは、「ピクセルにスナップ」にチェックをお忘れなく。

※よくない例（小数点がいっぱい‥）

2倍サイズのデザイン作成のときに、奇数を使わない

スマホ用の2倍サイズのデザインであったのですが、本来 2倍サイズで作っているので、4pxの線なら実装時は半分の2pxに。30pxの文字サイズなら15pxの表示になります。

ですが、文字サイズが10px（5pxは実装できないし、できても読めない）だったり、線の幅がなぜか1px（奇数）で作られていたり。ミスなのかあえてなのかわからない場合もあるので、お気をつけください。文字サイズの対策として、ぜひ実機確認してみて可読性のチェクもしましょう(^^)

最後に

基本的なことが多く細かい内容でしたが、自分でも気をつけたい部分もたくさんあります。
まとめ出すのたくさん出てきたので、また次回！

「ページトップへ」のデザインを33個集めてみた（パート２）

futappa_staff — Mon, 05 Oct 2020 06:19:17 +0000

「ページトップへ戻るボタン」のデザインを集めたサイトが、あまり見当たらなかったので、まとめてみました。なるべく近年のサイトから探してみましたので、参考にどうぞ♪

広いめのページトップエリア

上村建設株式会社　九州・福岡県福岡市博多区の総合建設会社

株式会社グッド・フィール（Good-Feel Group）

まとめ

いかがでしたか？
色々なデザインがありますが、普段のサイト制作のときにお役に立てたら幸いです♪

ファビコンを31個集めて４パターンに分類してみた

futappa_staff — Tue, 29 Sep 2020 06:40:41 +0000

はじめに

faviconを作るときって、みなさんどのようにしていますか？
ファビコンを集めたサイトがあまり無かったため、自分で集めてみました。

今回は、なるべく有名な企業やショップ・ブランド・サービスなどのロゴとファビコンを集めてみました。31個集めたのち、自分なりに４パターンに分けてみました。

1.ロゴのモチーフ部分だけを使う

引用先のリンク一覧

2.正方形におさめる

引用先のリンク一覧

3.ロゴの一部を使う

引用先のリンク一覧

4.オリジナル（企業のカラー、代表的なキャラクターや商品モチーフを使うなど）

引用先のリンク一覧

最後に

いかがでしたか？私自身もfaviconをたくさん収集してみて、とても勉強になりました。今後のfavicon作りに活かしていただけたら幸いです♪

たねっぱ！ » デザイン

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #２

目次

はじめに

参考サイトのご紹介

h1タグ

h2タグ

h3タグ

まとめ

参考サイト

サイトから学ぶ、hタグ（見出し）の使い方とデザイン #１

目次

はじめに

参考サイトのご紹介

h1タグ

h2タグ

h3タグ

h3・h4タグ

まとめ

参考サイト

メインビジュアル14選！ 変わった形のデザインパターン♪

目次

いろんなパターン

採用情報｜株式会社ネットサービス・ソリューションズ

クリオ訪問看護・リハビリステーション

Rand | 神谷 直広 / NAOHIRO KAMIYA

一般社団法人 子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

Get the Picture by InsideJapan Tours

世田谷フルート教室 Setagaua Flute School

大阪大学産業科学研究所 先端実装材料 菅沼研究室

ふるさとの田んぼと水 子ども絵画展｜農村だいすき！ふるさと子ども美術館

株式会社クルイト

SUBARU健康保険組合 太田記念病院 看護部サイト

DAW Studio アオイウミト、－ボーカル収録・ボイス収録

シャトー酒折ワイナリー | CHATEAU SAKAORI

岐阜｜設計・建築 「佇」 -タタ住”マイ（たたずまい）

最後に

メインビジュアル20選！ スライドや動画になっているパターン♪

目次

動画・スライドになっているパターン

江戸東京きらりプロジェクト

あとリノ 育てていく住まい | リノベーションの株式会社リビタ

どんぐり｜札幌の焼きたてパンの店

【東京イラストレーターズ・ソサエティ（TIS）】Tokyo Illustrators Society

浦野歯科診療所 | 大阪、堂島の歯医者

山形県立産業技術短期大学校 | 山形県立産業技術短期大学校ホームページです。地域の即戦力となる学生を養成します。

倉敷芸術科学大学 芸術学部 | Kurashiki University of Science and the Arts – College of The Arts

TAGUCHi | ガジラ(GUZZILLA) | 土木解体アタッチメント | タグチ工業

株式会社ベンチマーク｜読売新聞京葉地区No.1

滋賀県近江八幡市に根差す歯医者 – クラウド歯科 CLOUD DENTAL CLINIC

ヒノヨコ.com|名古屋の子育てはじめてのひよこママへ

共栄製茶株式会社

春日市白水ヶ丘の内科｜ながの内科

江戸川区 瑞江の内科・循環器内科｜つちだクリニック

Matsue Group 採用サイト

TAPUKO THE GAMA | タッコにんにくを使用したマヨネーズタイプのドレッシング-タプコザガマ

株式会社OS工芸社

わかば保育園｜大阪府羽曳野市にある企業主導型保育園

株式会社ジェイアール東海高島屋 新卒採用ページ

スプレディ株式会社［Spready Inc.］

最後に

メインビジュアル7選！ ロゴがモチーフになっているパターン♪

目次

ロゴの形がモチーフになっているパターン

株式会社オーセン｜マーケティングテックカンパニー

岐阜の高気密高断熱住宅の工務店｜エムズアソシエイツ

松本市・岡谷市の工務店・ハウスメーカー｜ナガノテクノス

なないろサーカス団 | なないろの架け橋をつくるアートカンパニー

一般歯科 小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック

K-MIX – 株式会社ケイミックス

株式会社Leo Clie

最後に

コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

目次

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

不要なレイヤーは削除する

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

２、パーツ系は、まとめてグループにする

レイヤー名は関連する名前にする

メインビジュアル14選！変わった形のデザインパターン♪

Rand | 神谷直広 / NAOHIRO KAMIYA

一般社団法人子ども・青少年育成支援協会 | 障がい者及び学習困難者の児童又は青少年の健全な育成を目的とした活動を行う非営利組織

世田谷フルート教室　Setagaua Flute School

大阪大学産業科学研究所先端実装材料菅沼研究室

ふるさとの田んぼと水子ども絵画展｜農村だいすき！ふるさと子ども美術館

SUBARU健康保険組合太田記念病院看護部サイト

DAW Studio　アオイウミト、－ボーカル収録・ボイス収録

岐阜｜設計・建築「佇」 -タタ住”マイ（たたずまい）

メインビジュアル20選！スライドや動画になっているパターン♪

あとリノ育てていく住まい | リノベーションの株式会社リビタ

倉敷芸術科学大学芸術学部 | Kurashiki University of Science and the Arts – College of The Arts

江戸川区瑞江の内科・循環器内科｜つちだクリニック

株式会社ジェイアール東海高島屋新卒採用ページ

メインビジュアル7選！ロゴがモチーフになっているパターン♪

一般歯科小児歯科｜愛知県碧南市松江町｜あだち歯科クリニック