検索peeks-blog基本、自分のために書いてるブログ。日々でそっとのぞいた、ちらっと見た物事の中から、自分が「これは!」と思った物事を備忘録としてまとめました。Tipsアーカイブhttps://weback.net/process/layout/Web制作プロセスの画面設計フェーズでは、各UIパーツ・エリアの寸法を規定し、各情報ブロックを画面上に配置するレイアウト設計を行います。レイアウトを示すものとして、ワイヤーフレームを作成します。各情報ブロックを画面上に配置するレイアウト設計を行う。手書き程度の簡単なもので済ます人もいる。※参考:UXとカスタマージャーニーの違いやユーザーエクスペリエンスの解説レイアウト方針を決定するWebページの構成要素は、コンテンツやナビゲーションの他にもサイトロゴ、メインビジュアル、広告、ユーティリティ(検索、トップへ戻るボタン等)と数多くある。これらを適切にレイアウトするには、以下の6点を踏まえながら方針を明確にする必要がある。最適なレイアウトも異なる。事前に、どちらか1つのみの制作なのか、両方作るのかを考慮する必要がある。両方作る場合は、ソースコードを分けた専用サイトを制作するのか、1ソースのレスポンシブWebデザインにするかを決める。2レスポンシブWebデザインを採用するかメリット・デメリットがあるので、予め考慮しておく必要がある。★メリット・同じHTMLコードで制作されてるので、1ファイルの修正で住む。・同一URLなので、ユーザーがシェアするのが容易。・クローラーが効率よくページをクローリングしてくれるので、SEO上も有利。★デメリット・PCサイト、モバイルサイト共に最適化されず中途半端なデザインとなるケースもある。・HTML/CSSとも構造が複雑になるので、開発コストがかかる。・カード型(タイル型)4CSSレイアウトについて・固定レイアウト(px)と可変レイアウト(%、em)5ナビゲーション・グローバルナビゲーション・ローカルナビゲーション・ページングナビゲーション・ページトップへ戻るボタン・フッターナビゲーション6ヘッダとフッターグリッド設計をする以下の点を考慮する。・960px幅が最も有名だが、少し狭い印象も。・ガーターとは、カラムとカラムの隙間のこと。20〜40pxが多い。→10進数と16進数のどちらを基準にするかも考える。4両サイドのマージンタイポグラフィ設計をする定義:文字周りのスタイルを設定することp要素、h1〜h6の見出し要素、リスト要素が対象となる。Tipsアーカイブhttps://weback.net/process/artworkWeb制作プロセスのデザインラフフェーズでは、詳細なビジュアルデザインを行います。各UIパーツのカラーや装飾をデザインし、画像を作成します。1枚のデザインカンプとして表現します。このフェーズでは、詳細なビジュアルデザインを行う。イラストの作成、アイコンやボタン等のUIパーツの作成、ページの装飾、その他ビジュアルに関する具体的なデザインを全て行う。PhotoshopやIllustratorなどの画像編集ソフトで画像の作成も行う。1カラー設計をする配色を考え、仕様する色のカラーコード表を作成する。微調整はページ全体が出来上がってからでも行えるが、デザインカンプ作成やコーディングに必要なカラーコードはここで用意する。★どのような色を決める必要があるか。・キーカラー:#FFD700→配色する際に、鍵を握る最も重要な色のこと。→必然的にサイトの印象を決める事にもなる。→ロゴの色をキーカラーにしたり、サイトで表現したいイメージに合う色を選ぶ。・ベースカラー:white→使用する割合が最も多い、ベースになる色のこと。(ただし、背景色となる白(ここでは#F7F7F7)は除く)→キーカラーをベースカラーにする場合もあるが、絶対ではない。・サブカラー:#F7F7F7→ベースカラーを補う色。ベースカラーよりは使用する割合は少ない。→1色とは限らず複数使う場合もあるが、多くても4色に留めるのが無難。・アクセントカラー:green、#8C2A2A→目立つ部分にほんの少量だけ使う色のこと。→ベースカラーとは対象的な、トーンを変えた色がよく用いられる。・本文のフォントと背景:black→背景が白の場合、フォントカラーは黒が多い。→カラーコードでは若干薄い「#333」がよく使われている。→背景を白以外にするなら、フォントカラーもそれに合わせて調整する。Tipsアーカイブhttps://weback.net/process/implement/Web制作プロセスの実装設計フェーズでは、コーディングを行う前段階として仕様を整理します。CSSファイルを作成します。Tipsアーカイブhttps://weback.net/process/coding/Web制作プロセスのコーディングフェーズでは、開発環境を構築しHTML/CSSのコーディングを行います。完成し、レイアウト上問題なく表示できるところまで行います。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。TOP検索:管理人紹介21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。peeks-blog。