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

みこボタン(さくらみこ ボイス集)のレイアウトを見やすくしました(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

Webコンテンツカテゴリの最新記事