マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。
Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。
クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。
選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。
レイヤーマスクは非常に便利で使用頻度の高いツールなので、使い方をしっかりと復習しましょう。
近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。 それぞれの要素数が異なっていても同じグループと認識します。
適切な余白を設定することでユーザーが情報を適切にグループ分け出来るようします。
CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。
すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。
CSSリセットはブラウザに付属しているデフォルトのスタイルを打ち消すために使用するので、必ずCSSリセットを一番上に記述します。
marginとは要素の外側に出来る隙間の事です。
paddingとは要素の内側に出来る隙間です。
言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。
marginとpaddingは共に４つの方向別に指定する事が出来ます。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。
ホテルフェリカ 池袋駅東口より徒歩3分と絶好のロケーション。世界のトップアーティストが数々の公演を繰り広げる「東京芸術劇場」など新しく生まれかわった文化の街池袋、東京の城北地区唯一のグランドホテルです。
シングル・スタンダードルーム
最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。
ツイン・スタンダードルーム
上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。
間取り図
シングルルーム
ツインルーム
共通室内設備
table要素を使うことで、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。
caption要素は、表のキャプション（タイトルや説明）を表します。
table要素＝表全体を示す要素です。表の大きさや罫線などは、この要素に設定。
tr要素＝表の行を示す要素。例えば3行の表を作成する場合はこの要素を3つ配置する。
th要素＝見出し用のセルを示す要素です。
td要素＝表のセル（データセル）を示す要素。例えば横に3つのセルを並べたい場合は、各tr要素の中にこの要素を3つ配置。
caption要素＝表のキャプション（タイトルや説明）を表します。
例
<table> <tr> <th>見出しセル1</th> <th>見出しセル2</th> <th>見出しセル3</th> </tr> <tr> <td>データセル1-1</td> <td>データセル2-1</td> <td>データセル3-1</td> </tr> <tr> <td>データセル1-2</td> <td>データセル2-2</td> <td>データセル3-2</td> </tr> </table>
宿泊料金表
部屋タイプ ツイン シングル
グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ
平日 15,800円 20,800円 58,000円 9,800円 14,800円
休前日 19,800円 25,800円 12,800円 17,800円
Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。
ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。
既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。
noteに知見を溜めていましたが、9月からPDFに変えました☺️サイトを分析して、まとめて、考察して深ぼっていくのが大好き。もはや趣味。ちょうど30サイトになったので、統合して１つにまとめました！良ければ見てやってください 💃https://t.co/30CaFZ1l5M pic.twitter.com/65ymqUfIHk
— がたまり / root (@ri_gatamari) 2021年1月11日
一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。
Photoshopで行う作業は大きく別けると以下の３つ
・Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき［Ctrl］＋［Alt］＋［Shift］を押したままに。
Adobe Photoshop設定ファイルを削除しますか？」とダイアログがでる。
・選択範囲を取る
などで選択範囲を取る。
微調整はクイックマスクモードで作業する。
・画像間の移動
別のファイルに選択範囲を切り取って移動
・ビネット効果
iOSでsummary要素の黒い三角形を消すには以下のコードを使っていましたが、それでは消えない場合があるので、下のコードに差し替えて下さい。
誤
summary::-webkit-details-marker { display: none; }
details summary::-webkit-details-marker, details summary::marker { display: none; }
Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。
ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。
リアルタイムコラボレーション: 複数人で同時に同じファイル編集できます。
豊富な機能: ベクターグラフィック編集、プロトタイピング、デザインシステム構築など、幅広い機能が搭載されています。
Figmaの構造は、大きく分けるとTeamとDraftsの2つのスペースに分かれています。
Teamの中には「Project」さらにProjectの中に「File」が入っている仕組みです。Team内であれば複数人で共有することが出来ます。無料プランの場合、1つの「Project」、3つの「File」までという制限がついています。
Team自体は用途に応じて複数作成する事が可能です。
Teamが複数のメンバーで利用できるスペースであるのに対して、Draftは自分だけが編集できる作業スペースです。Draftとは「下書き」という意味を持つ言葉である通り、作成したデザインを下書きとして保存できます。下書きを共同で編集したい場合には、Projectに移動させることで、共同編集できるようになります。
