MENU

3.2 ヘッダーの作成

目次-全章

第2章で作成したアプリケーションを元に、まずはヘッダーから作成しましょう。

※このチュートリアルで使用する図(画像)が皆さんが作成最中のアプリのレイアウトとは若干異なる場合があります。レイアウトの細かい設定は12章のレスポンシブ対応にて行うので12章より前では、絶対に図(画像)と同じにしなければいけないとは思わずに進めていただいて問題ありません。

目次

ヘッダーの作成

第3章では、簡易版Twitterのページレイアウトを作成していきます。

第2章で作成したアプリケーションをコピーして始めます。

アプリケーションのコピー

ログイン後のHome画面で、My appsのうち、第2章で作成したアプリケーションのコピーボタンをクリックします。

図3.2.1 My apps選択

ポップアップが表示されるので、アプリケーション名を入力します。ここでは、「funrepeater-202204」とします。

「Copy the application database content」にはチェックを入れないでおきます。チェックをしておくと、データベースの内容もコピーされます。

図3.2.2 アプリケーションのコピー

アプリケーションがコピーされるとビジュアルエディタに移動します。

図3.2.3 bubble操作画面

第2章で作成した画面が残っていることが確認できます。

Reusable elementsの作成

デフォルトで用意されるページとReusable elements

ビジュアルエディタで左上の「Page: index」と表示されている部分をクリックすると、既存のページとReusable elementsが表示されます。

ページ名やReusable elements名をクリックして編集するページを切り替えます。

図3.2.4 Page: indexをクリック

アプリケーションを新規作成した際に以下のページが自動的に作成されています。3つのページは削除できません。

ページ
indexhttps://アプリ名.bubbleapps.io/でアクセスした時に表示されるページ
reset_pwパスワードをリセットするためのページ
404指定したURLが存在しなかったときに表示するページ
表3.2.1 各ページ一覧

Reusable elements

Reusable elementsはコンテナタイプの要素であるGroup、Popup、Floating Groupの3タイプのうちどれかを設定できます。

Reusable elementsの編集

最初に、各ページ共通に利用するヘッダーをReusable Elementsで作成しましょう。

ヘッダー要素を配置する

それでは、以下のヘッダーを作成していきます。(Figmaを参照)

図3.2.5 Headerを作成
サイズ横 1512px 高さ 100px
背景色オレンジ(#F2994A)
境界線(ボーダー)グレー(#BDBDBD) 太さ1px
エレメント間のスペース(Gap)24px
文字色白(#FFFFFF)
表3.2.2 Headerの各設定

「Add a new reusable element…」をクリックします。

図3.2.5 Reusable elementの作成

新たにポップアップが表示されるので、以下の画像のように設定し、「Create」をクリックしてください。

図3.2.6Reusable elementの新規作成

しばらくするとこのような画面が出てくるので、画面上をダブルクリックし、headerのプロパティエディタを表示させます。

図3.2.7 headerのプロパティエディタの表示

Width と Height をそれぞれ入力します。リアルタイムでサイズが変更されていることが確認できます。

図3.2.8 Headerのプロパティエディタ

ヘッダーのStyle設定

背景色や文字色、ボーダーの指定などはStyleとして設定を保存しておくことができます。

ここではヘッダー背景色、ボーダーを指定し、新しいStyleを保存してみましょう。

Background styleは「Flat color(塗りつぶし)」を選択、Colorにカラーコード#F2994Aを入力します。

Border style – all borders では「Solid(直線)」を選択、Width「1」を選択、Colorにカラーコード#BDBDBDを入力します。

図3.2.9 Headerの各設定

※ カラーピッカーから選択して設定することもできます。

この設定を保存するために、Styleをクリックし、選択肢から「Create a new style …」を選択します。

図3.2.10 Create a new style …を選択

ポップアップが表示されるので、わかりやすいStyle nameに設定します。

今回は「Header」にします。

図3.2.11 「Header」styleの作成

「CREATE」をクリックして保存します。

保存したスタイルは同じ種類のエレメントに適用できます。この場合、他のGroupエレメントにも同様のスタイルを指定できるようになりました。

アプリケーション名の配置

次に、アプリケーション名の「bubble チュートリアル」を配置します。表示のみのため、Textエレメントを配置し、名前とテキストを編集します。

図3.2.12 「bubble チュートリアル」の配置

Textエレメントを配置すると、デフォルトのStyleが設定されています。スタイルを破棄する場合は、Remove styleをクリックしてください。

図3.2.13 Remove styleを選択

スタイルの設定が解除されると、フォントの設定が可能になりますので、Figmaの設定に基づき以下の通り設定します。

図3.2.14 「bubble チュートリアル」の設定

Center the text vertically にチェックを入れると、文字をエレメントの高さ中央に配置します。

今後利用する可能性もあるので、スタイルに名前をつけて保存しておきましょう。ここでは「App Name」とします。

※ スタイルの名称の指定について、用意するスタイルが少ない場合は Section Title、Header Titleといったセクションごとの名前をつけていくのが一般的です。ただし大規模で複雑なアプリケーションだったり、さまざまなスタイルが必要な場合は、「16px Bold Left」など名前からスタイルの内容が連想できるように名前をつけるのも一つの技です。

アプリケーション名のサイズ調整

さて、今の状態では「bubble チュートリアル」の文字は全体が表示されていないかと思います。

図3.2.15 「bubble チュートリアル」の表示確認

ここで、エレメントのサイズ調整を行います。Figmaを参考に高さ・幅を調整します。

図3.2.16 「bubble チュートリアル」のサイズ調整

(Figma)

横幅:267px、高さ:72px、親要素の左端からの距離:27pxを入力します。

図3.2.17サイズ一覧

Y(縦位置)はヘッダーの高さ中央に表示する簡単な方法を利用します。

Arrangeメニュー

要素をクリックした状態で上部の「Arrange」をクリックすると、エレメントの位置設定を中心とした編集メニューが表示されますので、「Center vertically」を選択してください。

図3.2.18 Arrange > Center verticallyを選択

エレメントにマウスカーソルをあてて、上下の余白サイズが同じになっていることが確認できます。

リンクメニューを配置

次に、ヘッダーの重要な要素であるリンクを配置します。

Visual elements > Link を配置し、エレメント名とテキストを編集します。

リンク先はあとから設定しますので、アプリケーション名と同様にエレメントのサイズやスタイルを設定します。

図3.2.19 Visual elements > Link を配置

同じように全てのリンクを作成します。

スタイル等が同じなので、エレメントを選択した状態でコピー&ペーストをすると、簡単にエレメントがコピーできます。

図3.2.20 エレメントのコピー

それぞれのエレメント名、テキストを編集します。

複数の要素の縦位置を一括設定

3つのLinkエレメントを選択した状態で、「Arrange」メニューから「Align vertical centers」をクリックすると、全てのエレメントを高さ中央に設定できます。

図3.2.21 Arrange > Align vertical centersを選択

Figmaを参考に、それぞれのエレメントの位置を調整します。

図3.2.22 エレメントの位置調整

これでヘッダーが作成できました。

【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次