1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

MkkAdvent Calendar 2022

Day 9

プログラミング学習を学ぶ前に知っておきたいこと~デザインforノンデザイナー編~

Last updated at Posted at 2022-12-08

初めに

この記事はプログラミング学習を学ぶ前に知っておきたいことと題したシリーズの一つです。
このシリーズは各テーマごとに連日投稿予定です。

このシリーズ記事の対象者

  • プログラミングに興味を持って、学習を検討している方
  • 学習したいけど、何から手をつけたらいいのかわからない方

前回の記事の続きです。

※この記事はWebアプリケーションの開発の勉強をしたい方向けの情報になります。筆者が未経験のスマホアプリケーションやゲームについての記述はございませんのであらかじめご了承下さい。

Webサイトの配色やフォント、なんとなくダサいけど勉強する時間はない…
そんな方に最低限の情報をお届けします。

配色編

色は3色

①ベースカラー
②メインカラー
③アクセントカラー
①:②:③ = 70% : 25% : 5%
上記の配色だと失敗が少なく、見やすい画面が作りやすいです。

配色まとめ

フォント編

案件で有料のフォントを使うときは要注意

回避方法:商用フリーのフォントを使用する

おすすめ日本語フォント

  1. いろはマル
  2. やさしさ手書きゴシック
  3. コーポレートシリーズ
  4. はれのそら明朝
  5. ゆずポップ
  6. IPAゴシック
  7. 源柔ゴシック
  8. ラノベPOP
  9. ほのかアンティーク丸
  10. Rounded Mplus 1c

OSで表示できないフォントがある

明朝体 Noto Serif JP / Sawarabi Mincho
ヒラギノ Windowsには入っていない
游ゴシック font-weight:500(ForWIndows)

画像から使用されているフォントを解析

画像/URL

What Font Is

PNG/JPG

MyFonts

画像/URL/OpenType機能

Fontspring Matcherator

カテゴリ別おすすめフォント

価格表示
Din 1451 Alt

Web開発
Noto san JP

バナー制作
Rounded Mplus 1c


最後に

短い記事でしたが最後まで見ていただきありがとうございました。

明日はQiitaでアウトプットする際に参考にする媒体について投稿予定です。

参照元サイト

配色のルール | はじめてのデザイン 〜デザインの基本・考え方

Webサイトでの游ゴシック設定の注意点

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?