デザインの方向性の合意 ｜ Tips Note by TAM
デザインの方向性の合意を取らずにサイトの制作を進めてしまうと、「イメージと違う」といった問題に繋がりやすく、プロジェクトの進行に影響が出てしまいます。合意を取ってからデザインに入ることで方向性のズレが生じにくくなります。 実際にどうやってデザインの方向性を決めているのかをご紹介できればと思います。 「何のために作るのか」「どう表現するのか」を知るためにはヒアリングが最も効果的だと考えています。 「どう表現するのか」って何だか曖昧ですよね。プロジェクトを進行する時、複数の人が関わっている場合が多く、「かわいい」というキーワードでも人によって思い描くイメージは様々です。 ヒアリングで導き出したサイトイメージ（トーン&マナー）を資料化することで、クライアントやチーム内で、共通認識を図ることができます。 デザインのヒアリング まずはクライアントを知ることが大事です。制作するものが商品のブランドサイ
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
和風の縦書きサイトを作る時に気をつけたこと ｜ Tips Note by TAM
和風の縦書きで綺麗なサイトのデザイン作りたいな… 依頼が来てから考えても遅い！ということで実例を元にデザイナーとして和風の縦書きサイトを作る時に気をつけたことをご紹介します。 和風の縦書きサイトを作ることになった経緯 まずは経緯から。あるクライアントさんからコーポレートサイトリニューアルのご相談をいただきました。ヒアリングをしていく中でいくつかの「キーワード」が浮かび上がってきました。 そのキーワードが以下。 「伝統」「日本」「女性」「和」「ゆっくりした時間」「高い品質」…。 ふむふむ。キーワードを元にデザインコンセプトを固めていく最初の段階で、頭の中には「縦書き+明朝体が絶対に合う！」という確信がありました。Webサイトの多くは横書きですよね。日本の文化でもある縦書きの表現は伝統、日本らしさを伝えることができると感じ、提案することにしました。 「縦書き、横書き」のバランス 縦書きは右から
JavaScriptでURLのパラメータやアンカーを判断して処理を変更する方法 ｜ Tips Note by TAM
URLのパラメータやアンカー（#以降の部分）を取得して、その値ごとに処理を変更する方法をまとめました。 URLのパラメータで判断する場合 パラメータは、「?」+「変数(パラメータ)＝値」というかたちで構成されています。 ※パラメータは1つとは限らず、複数ある場合は「&」でつないでいきます。 まずlocation.searchを利用して「?」で始まるパラメータ部分を取得します。（substring(1)とすることで2文字目以降［?以外］を取得します） もしURLにパラメータが存在すれば、さらに「&」で分割した後に、連想配列のkeyとvalueにそれぞれパラメータのkeyとvalueを格納します。 処理を変更するにはif文で条件を指定するだけです。 【パラメータに「id=osaka」が含まれるかどうかを調べる場合】 // URLのパラメータを取得 var urlParam = location
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォン・PCのブラウザシェア調査（2019年11月分） ｜ Tips Note by TAM