レッスン概要
このレッスンでは、私たちの作品を紹介するためのケーススタディページの基本構造を構築します。その過程で、フレームプリセットを使用してフレームを作成し、制約を使ってデザインをレスポンシブにする方法を学び、スマートセレクションを活用して素早くレイヤーを整理し再配置します。
ケーススタディは、特定のプロジェクトや作品の書かれたショーケースです。問題を強調し、その解決策と達成した結果を示します。また、潜在的な雇用主やクライアントに対して、あなたが提供できる価値を理解してもらうためのスキルや専門知識を示します。自分のケーススタディを書くためのインスピレーションを得るには、Figmaのブログ、Shortcutにある数十のケーススタディをチェックしてください。
ポートフォリオには複数のケーススタディが含まれる可能性があります。単一のケーススタディテンプレートを構築するのではなく、異なるケーススタディページレイアウトをカスタマイズするために使用できる以下の要素を作成します。
- ページのコンテキストを設定するための太字のテキストと画像背景を持つヒーロー。
- ページのコンテンツを整理するためのセクション見出し。
- プロジェクトのさまざまな側面と私たちがその成功にどのように貢献したかを説明するための段落テキスト。
- 完成したアセットを披露したり、進行中の作業またはその他のビジュアルやリソースを紹介することを可能にする画像。
- また、プロジェクトからの洞察やクライアントやコラボレーターからの感想を含めることができる引用ブロック。
注意: このレッスンでは、これらの要素の基本構造を設定することに焦点を当てており、すべてのレイヤーの正確な寸法を提供するわけではありません。でも心配しないでください。その詳細は、後のレッスンで洗練します。
フレームプリセットを使用してフレームを作成します。
私たちのケーススタディはウェブサイトのフルページになります。ページをレイアウトし正しい寸法を使用していることを確認するために、フレームプリセットを使用できます。
フレームプリセットは、既製のフレームサイズの集合です。これを使うと、よく使われる寸法のフレームを素早く作成でき、フレームのサイズを覚えたり推測したりする必要がなくなります。フレームツールを有効にすると、一般的なデスクトップ、モバイル、タブレットデバイスのためのフレームプリセットが右側のサイドバーに表示されます。矢印をクリックしてセクションを展開し、リストからプリセットを選択します。よく使われるデバイスとアセットのテンプレートのプリセットを選択できます。フレームプリセットについてもっと学びましょう。
フレームプリセットを使って新しいフレームを作成
デスクトップフレームプリセットを使用してフレームを作成します。
- フレームツールを有効にし、右サイドバーのデスクトップセクションを開きます。
- キャンバスに新しいフレームを追加するためにデスクトップフレームプリセットを選択します。
- 新しいフレームの名前を
ケーススタディ探索に変更します。
これで、ケーススタディ要素を作成し始めるための定義されたスペースができました。フレーム内にスペースが足りなくなった場合は、フレームを選択して底辺をドラッグして長くすることができます。将来的なレッスンでは、オートレイアウトを使用することによって手動でフレームをリサイズする手間を省く方法を学びます。