みこボタン（さくらみこ ボイス集）のレイアウトを見やすくしました（2021/10/30）#さくらみこ #miko_Art #みこボタン

みこボタン（さくらみこ ボイス集）を大幅にリニューアルしました。

レイアウトを見やすく変更しています。

使いやすいサイトになったと感じてくれたらうれしいです。

レイアウト変更

まず、スマホでもPCでも見やすいようにレイアウトを変更

技術的には、レスポンシブ対応（Responsive Web Design）するため、CSSファイルを更新。

・全体レイアウト → Gridを使用し、PCやタブレットで見たときには3段構成、メインコンテンツは左にサイドバー、右に音声ボタンというレイアウトにしました。スマホなどの小さな画面では1カラム表示

・Header → Flex boxを使用し、Twitterで共有 のところを並べて表示

・Footer → Multicolを使用し、2カラムで表示

カテゴリー分け

次に、カテゴリー分け

もともとは全ボイスを昇順で表示していましたが、6つにカテゴリー分けして表示しました。

・新着 – New

・あいさつ – Greeting

・ホロメン – Member

・リアクション – Reaction

・おもしろ – Funny

・癒し – Comfort

各カテゴリーをクリック、またはタップすると、そのカテゴリーまで飛びます。

新着 – New のみ重複していますが、他は重複していません。

また、英語圏の方でも内容がわかるように、英語表記を追加しています。

フォント変更

さらに、フォントを変更

もともとMeiryoを使っていましたが、見出しやボタンなどそれぞれに異なるフォントを採用し、見やすくしました。

みこちがUNDERTALEでサンズ戦をめちゃくちゃ頑張っていたのを見て、一番上の見出しにはそれっぽいフォントを採用。

h1 {
    font-family: 'Press Start 2P', 'keifontregular', 'Kosugi Maru', cursive;
    font-size: 5rem;
    color: rgb(255, 78, 98);
    text-transform: capitalize;
}

h2 {
    font-family: 'Fredoka One', 'Kosugi Maru', cursive;
    font-size: 3rem;
    color: rgb(46, 207, 202);
    margin-top: 1rem;
}

p {
    font-family: 'Noto Sans JP', sans-serif;;
    font-size: 1.6rem;
    color: rgba(44,44,44,1);
}

a {
  font-family: 'Irish Grover', 'Acme', 'Sawarabi Gothic',cursive;
  font-size: 1.6rem;
}

button {
  font-family:'Noto Sans JP', sans-serif;
}

併せて、

みこボタン（さくらみこ ボイス集）に新ボイスを追加しました！

下のリンクから聞いてみてね！

みこボタン（さくらみこ ボイス集）

Sample

音声ソース

Miko Ch. さくらみこ

さくらみこ ねこ動画もどうぞ！

さくらみこ ねこ 「元気があればぁなんでもできう！」Sakura Miko Cat