michi-h

michi-h

レスポンシブデザインを実装する方法

元記事事前確認をする内容対応ブラウザ、端末 IE対応する/しない 最新ブラウザバージョンだけで良い/だめ IE対応なら追加料金などもあり 要調整内容デザインサイズ、モバイル、デスクトップ ピクセル比で割り切れない数字を使用しない 4インチ端末、1800pxを超えるウィンドウサイズ、ぞれぞれで見られた時にどうするのかを確認する 命名規則を決めておく フォントサイズはデザイン上での指定は必ずpx ptではない (1.333...pt = 1px) 画像は、最低限等倍と

michi-h

    • [デザイン] タイポグラフィ、文字の種類、フォントの選び方、文字組み、レイアウト

      元記事タイポグラフィとは文字を読みやすく、美しく並べること、体裁を整えること フォント、サイズ、配置方法によって文章の読みやすさが大きく異なる 制作物にあったイメージのフォントを選び、適切な太さと大きさにする 行の間隔、文字と文字の間隔にも注意が必要 文字下のラインや、行の始まりなどの位置を揃えると、美しく整って見える 文字をデザインとして扱うこと 文字が主体のアーティスティックな表現のこと 文字というよりも、イラスト 文字の種類和文フォント：明朝体、ゴシック体 明朝体

      michi-h

      • [デザイン] カラーホイール、三属性、色の分類、色のイメージ、色の見え方、配色のルール、色の対比

        元記事カラーホイール三原色：赤色、黄色、青色 等和色：緑色、紫色、橙色 第三色：赤橙色、黄橙色、黄緑色、青緑色、青紫色、赤紫色 類似色隣り合った色。まとまりがある 補色色の差が大きく、お互いの色を引き立てあう 三属性色相：赤、黄、緑などの色合いのこと 明度：色の明るさの度合いのこと。高いと白くなり、低いと黒くなる 彩度：色の鮮やかさの度合いのこと。高いほど鮮やかになり、低いほどくすんだ色になる 色調 (トーン)三属性の組み合わせで、明度と彩度が似ているものをグループ化

        michi-h

        • [デザイン] 役割、媒体、進め方、基本原則

          元記事デザインとは計画を記号に表す、線を引く、描く →アイデアを形として表現する 世の中の様々なものは、利用する「ヒト」を想定して作られている つまり、利用者目線 デザインは、「ヒト」のために、最適な形を実現するもの。 なんらかの課題を解決するもの。 課題発見、課題解決策の思考、課題解決策の実施/実現の流れ。 デザインとアートデザイン：課題解決 アート：自己表現 デザインの重要性情報を伝えることが容易になる 非言語でしか伝えられないものがある ブランディングにつなが

          michi-h

        レスポンシブデザインを実装する方法

        michi-h

        • [デザイン] タイポグラフィ、文字の種類、フォントの選び方、文字組み、レイアウト

          michi-h

        • [デザイン] カラーホイール、三属性、色の分類、色のイメージ、色の見え方、配色のルール、色の対比

          michi-h

        • [デザイン] 役割、媒体、進め方、基本原則

          michi-h

          webデザインでよく聞く用語集

          元記事アクセシビリティ健常者、健常者でない方、そのほかどのような方でも、webのその情報にアクセスが容易であることを指す SEO (search engine optimization)検索エンジンで検索した際により上位に表示されるための対策やテクニックのこと グリッドレイアウトwebページを作成する際のレイアウト手法の一つ 格子状にグリッドを置いて、要素を配置していく コーディングプログラミング言語を用いてアプリケーションを構築すること コンバージョン (CV)we

          michi-h

          webデザインでよく聞く用語集

          michi-h

          デザインを良くするためのルール

          元記事フォーカルポイントを決めるフォーカルポイント：焦点や話題、活動などの中心の意味 イメージ写真や、グラフィック、見出しタイトル、テキスト文章など、様々な要素が考えられる 作成するデザイン全てを強調することはできない、どの部分がもっとも重要かを決定することが必要 通常フォーカルポイントは、もっとも強いヴィジュアルイメージを選ぶ傾向がある デザインに流れ、フローを作成するレイアウトに効率よく目線を誘導するために、各コンテンツ内容を整理する必要がある 通常、サイズや形

          michi-h

          デザインを良くするためのルール

          michi-h

          配色の基本ルール

          元記事 色数を制限する配色は最高でも３色まで 配色カラーパレットとして定義した色以外が必要な場合は、色合いや色彩トーンを使ったテクニックを利用する 配色カラーパレットの作成単色、モノクロ 単色をベースに、影やトーン、色合いを調整することで配色を作成する わずかな変化に、保守的な印象を与える 類似色 選択したメインカラーのカラーホイールの両隣にある色を加えた配色 どんなデザインプロジェクトにも適用しやすい、多彩性がポイント 補色 選択したメインカラーのカラーホイ

          michi-h

          配色の基本ルール

          michi-h

          デザインの基本原則

          元記事 線、ライン直線 順序、整然さを表現する 波線 動きを表現する ジグザグ線 緊張、興奮を表現する リーディングライン視線をリード、誘導する導線のこと デザイン、または特に注目して欲しいポイント、フォーカルポイントに視線を誘導することができる リーディングラインをウェブデザインに採用することができる 縮尺、スケール縮尺とは、個別のデザインごとに考えられたサイズ感のこと 重要、着目して欲しい点についてダイナミックな拡大、縮小を行うことで注目を集めることができる

          michi-h

          デザインの基本原則

          michi-h

          エンジニアとして自分に足りないスキル

          フロントエンド SEO アクセシビリティ レスポンシブデザイン ベーシックなデザイン全般 CSSでケーキ描きたい Angular全然わからん VueとReactまだわかんない領域がある CSSフレームワーク全然触れてない Jestもわかんない GraphQLわかんない Nuxt全部触れてない ReactNativeまだまだ踏み込めてない バックエンド Laravel, Lumen 広すぎ DB系Oracleわかんない DB系の細か〜いところ要求されるともうだめ NoSQL結

          michi-h

          エンジニアとして自分に足りないスキル

          michi-h