アーカイブ: コラム

気軽なデートで使える三軒茶屋のご飯やさん

引越しシーズンが終わり、そしてもうすぐ新生活が始まり、新しい出会いがある方も多いのではないでしょうか。
今回はそんな方におすすめな、三軒茶屋の「気軽なデートで行けるご飯やさん」を「昼の部」「夜の部」「さく呑み」の3つに分けて紹介しようと思います。
実際にDOL社員も三軒茶屋に住んでいます。おしゃれなカフェやバーもある一方で昔からの居酒屋もあり、その両方を楽しめる街です。

1. 昼の部1-1. 幻水豚1-2. シバカリーワラ1-3. みつる堂2. 夜の部2-1. 燻製201号室2-2. 五臓六腑3. さく呑み3-1. a-bridge3-2. SANITYおわりに

1. 昼の部

1-1. 幻水豚

清潔感のある内装で、キッチンを囲むようにカウンター席があります。わいわいお話を楽しむというよりは、食事を楽しむような雰囲気のトンカツ屋さんです。
材料にとてもこだわっており、揚げ物ですが食後も胸焼けを感じずあっさりと食べることができるので、女性にもおすすめです。
土日の昼時はいつも混雑しています。さらに、屋外の敷地は狭いため、列を作っているというよりは人だかりがあるという印象です。
回転率は悪くは無いですが、デートの相手と待ち時間におしゃべりをする必要があります。なので初デートで行くよりも、雑談しやすい距離感の相手と行くことをお勧めします。

出典元：食べログ /
幻水豚 公式Instagram
店名 幻水豚
住所 〒154-0024 東京都世田谷区三軒茶屋１丁目４０−１４ 太子堂ハイム 102
営業時間 月〜金 11：00～15：00，17：00～21：30
土・日・祝 11：00～21：30
定休日 無休
公式Instagram https://www.instagram.com/gensuiton/

1-2. シバカリーワラ

食べログ百名店にも選ばれる本格インドカレー屋さんです。カレー好きがこぞって訪れるお店です。かといって入りづらいことはなく、店内にはカップルや女性もたくさんいます。
そして、こじんまりとした内装ですが、エスニックなインテリアにもこだわっており、口ではもちろん目でもインドを楽しむことができます。
店主は度々修行のため、インドに行きます。また、いつも大行列のお店なので予約必須です。ぜひ営業日をチェックして訪れてみてください。

出典元：食べログ / シバカリーワラ 公式Instagram
店名 シバカリーワラ
住所 〒154-0004 東京都世田谷区太子堂４丁目２８−６
営業時間 火〜日 11：30～15：00，18：00～22：00
定休日 月曜日（不定休あり）
公式Instagram https://www.instagram.com/shivacurrywara/

1-3. みつる堂

無農薬・無化学肥料にこだわり、ジビエを中心とした肉類をいただけます。「重ね煮」という調理法や「発酵」を重要視しているお店です。都会に疲れて田舎の空気感を感じたい方にお勧めです。ランチの価格はお手頃ではありませんが、普段家庭で食べることができないジビエのカツや雑穀ひえのコロッケ、65年ものぬか漬けなど「食事」を楽しむことができます。
美味しく健康に、話題にも困らないレストランです。
今回ご紹介したのはランチですが、18:00〜21:00までは「発酵バー」に変わります。ふぐの子粕漬けや鮭の生ハム、赤松のカクテルなど、やはりこちらも珍しいお食事を体験することができます。

出典元：食べログ / みつる堂 公式Instagram
店名 みつる堂
住所 〒154-0011 東京都世田谷区上馬１丁目３１−１４ １Ｆ
営業時間 水・木・金・土・日11：30～21：00
定休日 月曜日、火曜日
公式Instagram https://www.instagram.com/mitsuru_do_sangenjaya/

2. 夜の部

2-1. 燻製201号室

おしゃれで燻製好きなら絶対にここです。薄暗い店内ですごくロマンチックな隠れ家レストランです。お店に入った瞬間に燻製の香りがします。アラカルト、メインそしてお酒まで燻製された料理が出てきます。燻製なので好き嫌いが分かれるとは思いますが、メニューを見ると、「この食べ物も燻製にできるの？！」とびっくりします。
好奇心旺盛な方にはぴったりのレストランです。

出典元：食べログ / 燻製201号室 公式Instagram
店名 燻製201号室
住所 〒154-0024 東京都世田谷区三軒茶屋１丁目３２−６ ＭＩＣＨＩ－ＣＯビル ２階-３階
営業時間 月〜日 17:00〜23：30
定休日 不定休
公式Instagram https://www.instagram.com/kunseisancha/

2-2. 五臓六腑 久

もつ焼きがお手頃価格で食べられるお店です。「五臓六腑　久」と「五臓六腑　本店」の2店舗があるのですが、「久」の方は一階はカウンター、二階へは靴を脱いで座敷へ上がるというユニークなつくりです。古民家のような内装で、洗練されておしゃれという雰囲気ではありませんが、馴染みやすい落ち着く空間になっています。
気が知れた間柄の二人ならぜひ足を運んでみてください。

出典元：食べログ
店名 五臓六腑 久
住所 〒154-0004 東京都世田谷区太子堂２丁目１５−８
営業時間 月〜土 18:00〜3：00
定休日 日曜日

3. さく呑み

3-1. a-bridge

雑居ビルの屋上にあるお店です。内装はもちろんとてもおしゃれでお酒や軽食、ご飯どれも美味しいです。カフェからランチ、バーまでどれもおすすめですが、いちばんのおすすめは夜のテラス席です。開放感がありとてもロマンチックです。
貸切イベントをやっていたり、テラス席は満員なことがあるのでお店に行く前に事前に電話で確かめるのがマストです。

出典元：食べログ / a-bridge 公式Instagram
店名 a-bridge
住所 〒154-0024 東京都世田谷区三軒茶屋２丁目１４−１２ 三元ビル RF
営業時間 月・火・木・金・土・日 12：00～00：00
定休日 水曜日
公式Instagram https://www.instagram.com/abridge2001/

3-2. SANITY

立ち飲み屋なのですが、ただの立ち飲み屋とは違いSANITYは冷蔵庫から好きなクラフトビールをとって飲むというシステムです。
個性的なビールがたくさんあるため、一緒に楽しく可愛いパッケージを選んで飲んでみましょう。
クラフトビールファンにはもちろん、飲んでみたいというビギナーにもおすすめです。飲み終えた缶は持って帰ることもできるので、ぜひその日の思い出にしてみてはいかがでしょうか。

出典元：食べログ / SANITY 公式Instagram
店名 SANITY
住所 〒154-0024 東京都世田谷区三軒茶屋１丁目３７−２ 三茶 栄通りビル1F
営業時間 日によって変動
定休日 日によって変動
公式Instagram https://www.instagram.com/sanitybeer/

おわりに

いかがでしたでしょうか？都心からもアクセスが良く、たくさんの美味しいお店がある街です。おしゃれだけど気取りすぎない街、三軒茶屋。これを機にぜひ一度訪れてみてください。

Web制作現場で役立つChatGPTの活用術

ChatGPTがリリースされてから、この記事執筆時点で約2年が経過しました。この記事を見ている皆さんは、すでにChatGPTをある程度使ったことがあり、その便利さを実感していることでしょう。ただ、実際の仕事の現場でフルに活用できている人は、まだそれほど多くはないのではないでしょうか？
本記事では、WebデザイナーがChatGPTをどのように活用すべきか、具体的な事例を交えて紹介します。

ChatGPTで良い回答を得るためのコツ1. ワイヤーフレームの作成補助2. コーディングの補助3. WordPressのカスタマイズ4. コミュニケーションの効率化注意事項おわりに

ChatGPTで良い回答を得るためのコツ

まず初めに、ChatGPTから明確な回答を得るためのポイントを3つ紹介します。

①質問の意図を明確にする

質問の意図を明確にして、一度の質問で求めている回答が返ってくるようにしましょう。
会話を続けながら条件を与えることも可能ですが、長い会話の中では最初の質問と整合性を保つ必要が生じ、精度が落ちてしまうことがあります。

悪い例

「Figmaの使い方を教えて」
（どの機能について知りたいのか不明瞭）

良い例

「Figmaでボタンのコンポーネントを作成し、他のデザインに再利用する方法を教えて」
（具体的な機能や目的を明示）

②条件や制約を具体的にする

①とも関連しますが、条件や制約はできるだけ具体的に記載しましょう。

悪い例

「HTMLのボタンをおしゃれにする方法は？」
（どのようなデザインを求めているのか曖昧）

良い例

「CSSを使って、ホバー時にグラデーションが変化するボタンを作るコードを教えて。ライブラリなどは使わず、シンプルなCSSでお願いします」
（具体的な条件を指定）

③期待する回答のフォーマットを指定する

ChatGPTではフォーマットを指定して質問を投げることができるので、求めているフォーマットを記載しましょう。（〇〇文字以内で〜、ですます調で〜、初心者でもわかるように〜、など）

悪い例

「GA4のイベントトラッキングの設定方法を教えて」
（概要だけが欲しいのか、手順を詳しく知りたいのか不明）

良い例

「GA4でボタンのクリックイベントをトラッキングする設定手順を、1. Google Tag Managerの設定 2. GA4のイベント設定 3. 確認方法 の3ステップで説明してください」
（回答のフォーマットを明示）

次に、具体的な活用例を紹介します。

1. ワイヤーフレームの作成補助

１つ目は「ワイヤーフレームの作成補助」です。
ワイヤーフレームはサイトのレイアウトや全体の構成を決めるものです。
それぞれの要素にダミーのテキストを入れる必要がありますが、「ダミーテキスト」だけだと、どのような文章を入れればよいのか、クライアントが判断できません。
そのような時に、以下のような質問を投げることで、実際の情報に近い文章を提案してくれます。

Web制作会社のサイトトップページにサービスを3つ掲載します。それぞれのサービスのタイトルを10文字以内、概要を100文字以内で作成してください。タイトルと概要の頭には「ダミー。」とつけてください。

ワイヤーフレーム作成時はダミーテキストをいれる箇所が多いので、自分で全て考えるのは大変ですが、ChatGPTにお願いすることで時間が削減できます。

2. コーディングの補助

次に「コーディングの補助」です。
ChatGPTはコードの生成やエラー修正にも役立ちます。
HTMLのタグやCSSの生成にももちろん使えますが、HTMLやCSSのジェネレーターはインターネット上にも割と存在します。
そのため、JavaScriptのエラー特定など、インターネット検索で解決するのが難しい問題に使うと、時間が削減できます。

ボタンをクリックすると表示/非表示を切り替えたいのですが、動作しません。考えられる原因を教えてください。
以下が現在のコードです。

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    document.querySelector('.content').style.display = 'block';
});

補足:
・content は最初 display: none; に設定されています。
・表示・非表示を切り替えたいので、クリックするたびに display: block; と display: none; を切り替えるようにしたいです。

また、普段見ているサイトのアニメーションが、どのように実装されているか知りたいとき、わからない箇所のソースコードをChatGPTに投げることで、理解できることがあります。

以下のJavaScriptがどのような処理をしているのか、コメントアウトでわかりやすく教えて下さい。
〜　JavaScriptのコードを貼り付ける　〜

3. WordPressのカスタマイズ

ChatGPTはWordPressのカスタマイズにも活用できます。
WordPressをカスタマイズする際、テンプレートタグやカスタム投稿タイプの設定など、ChatGPTに聞くと適切なコードを提案してくれます。

カスタム投稿タイプ 'news' を作成する functions.php のコードを書いて

【提案コード】

function create_custom_post_type() {
  register_post_type('news',
    array(
      'labels'      => array('name' => __('News'), 'singular_name' => __('News')),
      'public'      => true,
      'has_archive' => true,
      'supports'    => array('title', 'editor', 'thumbnail'),
      'menu_position' => 5,
    )
  );
}
add_action('init', 'create_custom_post_type');

上記は一例ですので、他にカスタマイズの要望がある場合でも、ChatGPTに必要な情報を共有すれば、コードの大枠を生成してもらえます。

4. コミュニケーションの効率化

クライアントとのやり取りの中で、自分で作成した文面がわかりづらいと感じるときには、ChatGPTにブラッシュアップしてもらうことができます。

クライアントにお見積り詳細について返信します。
以下の文章を添削してください。適宜改行したり、箇条書きを使用してください。

本件については、ご要望を踏まえた形で対応させていただきます。作業内容としてはデザインやコーディングを行い、納期は〇月頃を予定しています。費用はだいたい〇〇円くらいになる見込みです。なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。

【提案文面】

本件については、ご要望を踏まえた形で対応させていただきます。

■作業内容
デザイン
コーディング

■納期
〇月頃を予定しています。

■費用
おおよそ〇〇円になる見込みです。

なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。

「良い回答を得るためのコツ」でも触れましたが、ChatGPTは回答のフォーマットも指定できるので、メールで送る想定ということを伝えれば、件名を考えてくれますし、ビジネスメールらしい文章にしてくれます。

注意事項

  • ChatGPTには、会社名や個人名、住所、電話番号、メールアドレスなどの個人情報や機密情報を入力しないようにしましょう。ChatGPTは入力内容を学習データとして使うため、可能性は低いものの、第三者に回答として表示されてしまうリスクがあります。特にメール文の添削を依頼する際は、該当する情報を削除・置き換えてからご利用ください。
  • また、公開されているサイトのJavaScriptコードを学習目的で活用するのは問題ないですが、商用利用や無断転載は避けましょう。迷った場合は、事前にサイト管理者に確認するのが安心です。
  • ※本記事の内容を活用する際は、ご自身の判断と責任のもとでお願いします。万が一トラブルが発生しても、当社では責任を負いかねますので、ご了承ください。

おわりに

いかがでしたでしょうか？
ChatGPTの活用法は、今回取り上げたもの以外にも、アイデア次第で無限に存在します。
ぜひ業務の自動化・効率化を進めながら、よりクリエイティブな作業に時間を使うために、ChatGPTを積極的に活用してみましょう！

静的ページでお問い合わせフォームを実装する方法

お問い合わせフォームを実装する場合、WordPressサイトであればプラグイン（Contact Form 7など）を利用して簡単に設置することができます。しかし、LPや小規模サイトの場合、わざわざフォーム実装のためにWordPressを導入することはできませんよね。また、自作するにもPHPの知識が必要となるので、WEBデザイナーにとっては少々ハードルが高いと思います。
そこで今回は、WordPressプラグイン以外でお問い合わせフォームを実装する3つの方法を紹介したいと思います。

1. PHP工房2. メールフォームプロ3. Googleフォームおわりに

1. PHP工房

[ PHP工房 ]

「PHP工房」はメールフォームやニュースCMSといった、WEBサイトに組み込めるPHPプログラムを配布しているサイトです。これらのプログラムを使用することで、WordPressを使わずにWebページをCMS化することができます。サンプルデモやマニュアルも充実しており、初心者に易しい作りになっています。

お問い合わせフォームのPHPファイルは「PHPメールフォーム（無料版）」からダウンロードすることができます。シンプルながらも必須項目や自動返信メールの設定、確認画面やサンクスページにも対応しています。

メリット

・無料で利用可能：コストをかけずにお問い合わせフォームを設置できます。
・シンプルで軽量：余計な機能がなく、サイト速度への影響はほぼありません。
・カスタマイズが容易：HTMLやCSSの編集ができ、デザインの自由度が高いです。

デメリット

・セキュリティ対策は自己責任：スパム対策やバリデーションを自分で実装する必要があります。
・サーバー側の設定が必要：PHPが動作する環境でないと使用できません。（通常のレンタルサーバーであれば問題なし）
・メンテナンス負担：将来的な修正やアップデートは手作業になります。

2. メールフォームプロ

[ メールフォームプロ ]

「メールフォームプロ」とは札幌Web制作のシンクグラフィカが提供している、高機能でカスタマイズ性の高いメールフォームです。標準でスパム対策機能やバリデーション機能が備わっており、確認画面の表示やファイル添付機能も実装できます。企業サイトなど信頼性の高い、お問い合わせフォームを設置したい場合に最適です。

お問い合わせフォームのCGIプログラムは「素材ダウンロード > CGI/Perlフリー素材 > メールフォームプロCGI」からダウンロードすることができます。

メリット

・多機能で実用的：ファイル添付、確認画面、スパム対策などが標準搭載されています。
・デザインの自由度が高い：HTMLやCSSで自由にスタイル調整が可能です。

デメリット

・導入までに手間がかかる：設定ファイルの編集や設置にある程度の知識が必要です。
・カスタマイズの学習コスト：機能が豊富ですが、使いこなすには少し時間がかかります。

3. Googleフォーム

[ Googleフォーム ]

「Googleフォーム」は、Googleが提供する無料のフォーム作成ツールです。Googleアカウントさえあれば誰でも簡単に利用することができます。作成したフォームはリンクで共有したり、HTMLコードを使ってWebサイトに埋め込んだりすることができます。さらにGoogleスプレッドシートと連携することで、送信データを自動で管理できるため、お問い合わせの集計がスムーズに行えます。

メリット

・無料で簡単に作成可能：非エンジニアでも数分でフォームを作成することができます。
・自動集計が便利：Googleスプレッドシートと連携することで、リアルタイムで回答を確認できます。

デメリット

・デザインが制限される：カスタマイズできる箇所が限られているため、サイトデザインに馴染ませるのが難しい場合があります。
・第三者サービスの抵抗感：ユーザーによっては別サービスの利用に不安を感じる場合があります。

おわりに

今回はWordPressプラグインを使わずに、静的ページでお問い合わせフォームを実装する方法を紹介しました。以下、総評です。

・カスタマイズ性を重視するなら「PHP工房の素材」
・高機能かつ安心のサポートを求めるなら「メールフォームプロ」
・手軽さとスピードを優先するなら「Googleフォーム」

どの方法が最適かはサイトの目的や必要な機能、予算などによって異なります。
この記事が最適なフォーム選びの参考になれば幸いです。

WordPressでECサイトを作るメリットとデメリット

WordPressは他のCMSに比べて、自由度が高いCMSです。ですが、WordPressで作られているECサイトをあまり見たことがありません。なぜなのでしょうか？

そこで今回はWordPressでECサイトを作るときのメリットとデメリットをまとめました。

メリット1.　費用を抑えてオリジナル性が高いサイトを作ることができるメリット２.　SEOに強いデメリット1.　サポートサービスがないデメリット2.　一部の決済方法が使えないおわりに

メリット1.　費用を抑えてオリジナル性が高いサイトを作ることができる

WordPressはプラグイン（拡張機能）が一番多いCMSです。
それらを駆使して独自のデザインやサイトに合わせた機能を追加することができます。また、それらは無料で公開されているので、初期費用は０円で始めることができます。
特にWordPress上でECサイトに欠かせないプラグインがこちらになります。

１.Welcart

Welcart

日本初のWordPress専用のショッピングカードです。
クレジットカード決済、会員機能が標準搭載されています。さらに定期購入や売り上げ集計などの拡張サービスも利用可能となっています。

２.WooCommerce

WooCommerce

世界中で最も利用されているECサイトのプラグインとなります。デザインカスタマイズや税率設定、商品登録・管理、カート機能などがあります。ダウンロード販売やサブスクリプション販売、コンビニ決済、クーポン発行など便利な機能が豊富にあるのが大きな魅力です。

メリット2.　SEOに強い

WordPressはSEO対策に優れていると言われています。SEOとはGoogleやYahoo!などの検索エンジンの検索結果に上位表示するための対策のことです。
ブログやホームページなど、自分のWebサイトが検索結果の上位（1ページ目など）に表示されれば、検索ユーザーの目に留まりやすくなります。
さらに、そこにユーザーの興味を引くような情報（タイトルや説明文）が表示されていれば、クリックして訪問してくれる確率が高くなるのでECサイトにはとても重要な項目となります。

また、前述の通り、WordPressはSEOに対してもプラグインが豊富です。
たとえば、全てのページの読みやすさのチェックが行われ、段落の分割や、番号付きの箇条書きやヘッダーなどの追加が必要かどうかを判断できるような機能などあります。

おすすめのSEOは以下になります。

1.Squirrly SEO

Squirrly SEO

特にコンテンツ作成時に役立つSEOプラグインです。たとえば、SEOに強いコンテンツを作成できている場合は、ランプが「緑色」に点灯します。点灯しない場合はなんらかの原因でSEO対策に問題がありますので、公開前にコンテンツの改善ができるメリットがあります。
SEOコンテンツ分析、キーワード順位の分析が充実しています。

2.EWWW Image Optimizer

EWWW Image Optimizer

自動で画像を圧縮してくれるプラグインです。手間を掛けることなくWebサイトの表示速度の改善が行えることによって、ユーザーは画面をストレスなく閲覧することができます。サイトへの信頼感や、ユーザーの離脱率を減らすことによってページ滞在時間が上がるため、間接的にSEO評価が向上します。一見当たり前のように聞こえますが、ユーザーにとって画面をサクサク読み込み、ページの表示速度が速いことはとても重要なことです。

デメリット1.　サポートサービスがない

無料で使えて汎用性が高い分WordPressにはサポートサービスがありません。何か不具合が生じた場合は、利用者同士が相談し合えるコミュニティフォーラムなどを活用して、自分で解決方法を調べる必要があります。

WordPressフォーラム：https://ja.wordpress.org/support/forums/

デメリット2.　一部の決済方法が使えない

近年のアパレルショップでは「ペイディ決済」が人気ですが、WordPressに直接導入することができません。そのため、それらの決済を使っている消費者は離れてしまう可能性があります。

おわりに

ECサイトを作るサービスがたくさん増えてきています。WordPressは汎用性が高く無料でできる反面、初めて使う方には難しいところがあります。まずは目的を明確にしてサイト制作に取り組むことが大切だと感じます。

DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

FigmaでUIデザインを始めよう！初心者向けガイド

UIデザインを効率よく進めるには、ツール選びが重要です。Figmaは、コンポーネントの活用やバリアブルの管理によって、手戻りを減らしながらスムーズにデザインを進めることができ、UIデザインに適しています。本記事では、Figmaの基本と、UIデザインに役立つ機能を初心者向けに解説します。

1. Webデザインとの違い2. UIデザインに役立つ機能2-1. オートレイアウト2-2. コンポーネント2-3. バリアブル2-4. スタイル2-5. Figma UIキット3. 効率的なUIデザインのためのポイントおわりに

1. Webデザインとの違い

はじめに、WebデザインとUIデザインの違いについて見ていきます。
WebデザインとUIデザインにはいくつかの違いがあります。

項目 Webデザイン UIデザイン
主な目的 情報を伝える、ブランディング 操作性を向上させる、ユーザー体験を設計
デザインの柔軟性 比較的自由度が高い コンポーネントやガイドラインの遵守が重要
重点 ビジュアルの魅力 ユーザビリティと機能性

UIデザインでは、「ユーザーに負担をかけず、直感的に理解できるか」が優れたデザインの指標となります。
Figmaでは、UIデザインに適した機能が充実しているため、これらの違いを理解しながら適切に活用することが重要です。

2. UIデザインに役立つ機能

それでは、具体的にUIデザインを効率的に進めるために役立つ機能を紹介していきます。また、今回はFigmaの基本操作についての説明は割愛させていただきます。

2-1. オートレイアウト

１つ目は「オートレイアウト」です。
グループ化との違いがわかりづらく感じるかもしれませんが、オートレイアウトは要素の配置を自動で調整できる機能です。グループ化が単に要素をまとめるだけなのに対し、オートレイアウトは追加・削除しても間隔や整列が自動で変わり、柔軟に対応できます。

メリット：要素の自動調整が可能になり、手動で配置を調整する手間が省ける

使わない場合の課題：レイアウト変更時に個別に修正が必要になり、時間がかかる


 
■参考サイト
Figmaのオートレイアウトの基本的な使い方

2-2. コンポーネント

続いて「コンポーネント」です。
コンポーネントを活用することで、ボタンやナビゲーションなどのUIパーツを再利用できます。
一度登録したコンポーネントはサイドバーの「アセット」から使用することができます。

メリット：一括で修正が可能になり、デザインの統一性が向上

使わない場合の課題：同じ要素を何度も作成する必要があり、作業時間が増える

 
■参考サイト
Figmaのコンポーネント機能の基本的な使い方

2-3. バリアブル

バリアブルを活用すると、色・数値・文字列などの値をあらかじめ登録しておくことができます。
色・数値・文字列はフォントやオブジェクトのプロパティとして使用が可能です。
例えば以下のような使い方をします。

  • ・テーマカラーを色のバリアブルとして登録する
  • ・オブジェクトの角丸に使用できる数字を数字のバリアブルとして登録しておく（4,8,12,など）
  • ・メインで使うフォント名を文字列のバリアブルとして登録する(Noto Sans JPなど)
メリット：変更時に一括で適用可能、デザインの一貫性を保ちやすい

使わない場合の課題：個別に色や数値を設定すると、変更時に手間がかかる

バリアブルは右側のサイドバー「ローカルバリアブル」から登録することができます。

「メインカラー」と「メインフォント」のバリアブルを登録
バリアブルを適用

 
■参考サイト
Figmaの新機能：バリアブルの使い方を詳しく解説します！

2-4. スタイル

テキストや色、エフェクトのスタイルを定義し、統一感のあるデザインを作ることができます。
例えば「フォントは16px、太字、青文字」といったスタイルを作成することで、デザイン全体で共通した見た目にすることができます。

「バリアブル」と「スタイル」はどう違うのか？

端的に説明すると、バリアブルが単一の値を設定するのに対し、スタイルは値をまとめて設定する機能になります。
 
また、スタイルで設定する値には、バリアブルを使用することができます。
例えばh1~h4までのスタイルを作成する際、フォント名をわざわざプルダウンから選択するのではなく、あらかじめ登録したフォント名のバリアブルを適用することで、より管理しやすいデザインファイルにすることができます。

メリット：全体のデザイン調整が簡単になり、デザインのばらつきを防げる

使わない場合の課題：各要素ごとに個別調整が必要になり、ミスが発生しやすい

 
■参考サイト
Figma│ローカルスタイルの使い方

2-5. Figma UIキット

Figma UIキットは、先述のコンポーネント・バリアブル・スタイルの集まりのようなものです。
以下のURLには無料のUIキットが数多く用意されています。
Figma UIキット

任意のUIキットを選択し、「Figmaで開く」を押すとFigmaファイルでそのUIキットが使えるようになります。

左側サイドバーの「アセット」に該当するUIキットのアセットが登録されるので、そこから使用することができます。

UIキットには先述のバリアブルやスタイルが大いに活用されていますので、どのように値を管理しているのか見てみるのも良いでしょう。

メリット：チーム全体で統一したデザインを使用でき、作業の効率化が図れる

使わない場合の課題：毎回新しくデザインを作成する必要があり、作業負担が増える

3. 効率的なUIデザインのためのポイント

はじめは面倒でもバリアブルとスタイルを定義する

あらかじめ使うフォント名、色、テキストのスタイルなどは、後々の修正が楽になるよう登録しておく。

オートレイアウトを活用する

整列が容易になり、デザインの統一感が出る。

コンポーネントを最大限活用する

ボタンやカードなど、繰り返し使用する要素はコンポーネント化する。

UIキットを活用する

あらかじめ作成されているUIキットを使用することで、作業の効率化を図る。

3. おわりに

Figmaを活用すれば、効率的にUIデザインを作成できます。本記事で紹介したオートレイアウト、コンポーネント、バリアブル、スタイル、Figma UIキットなどの機能を活用し、デザインの一貫性と作業の効率化を図りましょう。まずは基本操作を覚え、実際にプロジェクトで使ってみることが大切です。

DOLでは士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方や開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

【ウェブ制作に活かせる】知らないうちに使っている日本特有のデザイン

ウェブデザインの世界では、さまざまな文化的要素が組み込まれることがありますが、実は知らないうちに「和」の要素を取り入れているケースが多くあります。この「和」のデザインは、日本ならではの美意識や伝統を背景にしており、ユーザーに親しみや安心感を与える効果があります。

では、ウェブデザインにおける日本特有のデザイン要素とは具体的にどのようなものでしょうか？

今回はこちらを紹介していきます。

1. ウェブデザインに見る「和」の要素2. 実際に使われている例3. 素材を手に入れるには？無料で使えるおすすめサイトおわりに

1.ウェブデザインに見る「和」の要素

日本特有のデザインは、以下のような形でウェブサイトに反映されています。

配色

出典元：和のきれいな配色　キーカラーで選べる配色見本アイデア帖

日本の伝統色である「茜色」「若草色」「江戸紫」などが使われることで、自然で落ち着いた印象を与えます。例えば、茶系や淡い色彩を使うことで、ウェブサイト全体に、穏やかな雰囲気を与えることができます。

また、それらの色を背景に使うことで、主張しすぎないデザインになり、他のコンテンツを引き立てる効果も期待できます。なので、一見使いにくそうな伝統色ですが、協調性がある色となっています。

パターン・テクスチャ

出典元：日本伝統模様

麻の葉、七宝、青海波などの和柄パターンは、背景やボタンデザインに取り入れられることが一般的です。

これらのパターンは、装飾的でありながら視覚的なノイズが少なく、シンプルなデザインに調和します。背景として使っても、ポイントとして使っても和を演出できるものとなっています。
また、これらのパターンは日本の伝統的な象徴でもあるため、文化的な信頼感や高級感を与えることができます。

タイポグラフィ

出典元：モリサワ総合書体見本帳

毛筆風や手書き風のフォントを使うことで、日本らしい伝統的な雰囲気を演出することができます。
特に飲食店や観光業のウェブサイトで頻繁に見られるデザイン手法です。日本特有の伝統的な雰囲気を簡単に演出できます。

「和の情緒」やブランドの個性を際立たせ、他のサイトとの差別化を図る手段としても有効です。ですが、洗練されたフォントだと、ウェイトが細くなるため可読性が落ちてしまう可能性があります。デザインと可読性を何度も確認しながら、マッチしたフォントを見つけてみてください。

素材選び

出典元：freepik

金箔や和紙、木目など、日本独特のテクスチャを再現した素材が、背景やボタンの装飾に使われています。

ウェブサイト全体に高級感と温かみを与えることができます。特に、和紙風のテクスチャは落ち着いたトーンを加えるため、商品の詳細や情報をじっくりと見てもらいたい場合に効果的です。

一方、金箔や木目は視覚的なインパクトを与え、訪問者の目を引きやすくする役割を果たします。新春のキャンペーンサイトなどでよく使われています。

縦書き

出典元：灯屋 迎帆楼（あかりや げいはんろう）

縦書きは、日本特有の文字の羅列方法です。本来ウェブサイトは、ユニバーサルデザインを意識したデザインをすることが重要なため、ウェブサイトに縦書きを取り入れることは、可読性も落ち、難しいと感じます。

ですが、ポイントとして縦書きを取り入れることで、一気に「和」なデザインとなります。こちらもフォントと同様使い方が難しいですが、完成するととても個性的なデザインとなります。

2.実際に使われている例

これらの「和」の要素を活かしたウェブサイトの例をいくつか挙げてみましょう。

地域にちなんだサイト

出典元：常陸国ロングトレイル

地域の魅力を発信するウェブサイトでは、地元の伝統文化を反映した和柄や色合いが多用されています。例えば、観光のサイトでは柔らかな和紙風の背景が使われ、暖かみを演出しています。

飲食店のサイト

出典元：高砂寿司

和食レストランやお寿司屋さんのウェブサイトでは、毛筆フォントや木目背景がよく使われています。

これにより、高級感と伝統的な雰囲気を醸し出しています。

工芸品のサイト

出典元：金色世界

日本の工芸品や伝統品を紹介・販売するウェブサイトでは、和柄や漆黒の背景を取り入れることで、商品自体の魅力を引き立てています。

3.素材を手に入れるには？無料で使えるおすすめサイト

ウェブデザインで「和」の要素を取り入れたいときには、以下のサイトを活用するのがおすすめです。これらのサイトでは、高品質な和風素材が無料で手に入ります。

イラストAC

たくさんの種類の素材を発見できる素材サイトです。検索の仕方で出てくる画像が変わってくるので、いろいろなキーワードで試してみてください。

Unsplash

高品質な写真素材を無料でダウンロードできるサイトで、和紙や木目のテクスチャ画像が豊富に揃っています。

ぱくたそ

和風テイストの写真素材が多く揃っており、背景画像としても使いやすいです。

おわりに

日本特有のデザイン要素は、ウェブデザインに取り入れることで独自性を高めるだけでなく、見る人に親しみや安心感を与える力があります。これらの要素を効果的に活用するために、素材サイトや配色の工夫を試してみてはいかがでしょうか？和の美しさを活かしたデザインで、魅力的なウェブサイトを作りましょう！

DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

提案資料作成に使えるFigmaのおすすめポイント紹介！

提案資料作成は、プロジェクトの成功を左右する重要なプロセスです。従来はMicrosoft PowerPointが主流でしたが、デザインや効率性の観点から、Figmaを使うことでより効果的な資料を作成できます。本記事では、PowerPointと比較したFigmaの優れたポイントをご紹介します。

1. オブジェクト間の距離が測りやすい2. コンポーネントを利用できる3. スタイルが定義できる4. Google Fontsが利用できる5. 共同編集がリアルタイムでできるFigmaで提案資料を作成する際の注意点おわりに

1. オブジェクト間の距離が測りやすい

Figmaでは、オブジェクト間の距離を簡単に確認できるスナップ機能や、ホバー時に表示される距離ガイドが標準搭載されています。PowerPointでもガイドラインは利用できますが、Figmaのリアルタイムなガイド表示や正確な測定機能は、デザイン精度を高める上で非常に便利です。
 

オブジェクト間の距離をすぐに確認することができる

2. コンポーネントを利用できる

Figmaでは、よく使う要素をコンポーネントとして保存でき、複数のスライドで再利用することが可能です。一度編集するとすべての関連コンポーネントが自動更新されるため、資料全体の統一感を保ちつつ効率的に修正を行えます。一方、PowerPointでは類似機能が限定的で、手動で調整する必要がある場合が多いです。
 

例：フッターのパーツをコンポーネントとして作成した場合

3. スタイルが定義できる

Figmaでは、テキストやカラー、エフェクトのスタイルを定義して適用できます。これにより、資料全体で一貫性のあるデザインを保つことができます。ページ数の多い提案資料では、見出しの種類を管理し、一貫したデザインを作成することが重要です。そのような時は、Figmaのテキストスタイルで予めh1,h2,h3…といったスタイルを予め定義しておくことで、一貫したスタイルを当てることができます。PowerPointでは、スライドマスターを使用して同様の効果を得られますが、柔軟性や視覚的な直感性ではFigmaが優れています。
 

4. Google Fontsが利用できる

FigmaではGoogle Fontsが標準で統合されており、豊富なフォントから選択して利用することができます。PowerPointでもフォントを追加することは可能ですが、設定に手間がかかるため、Figmaの即時性と利便性は大きなアドバンテージです。
 

5. 共同編集がリアルタイムでできる

Figmaの最大の魅力の一つは、ブラウザベースでの簡単な共有と共同編集機能です。URLを共有するだけで、相手がインストール不要でアクセスでき、リアルタイムでのフィードバックや編集が可能です。提案資料を共同編集する機会は、あまり多くないかもしれませんが、別の案件を担当する際に、他のメンバーがFigmaで作成していたファイルに招待してもらうことで、先述のスタイルやコンポーネントを再利用できるため、やはりPowerPointよりも効率的に作業できる印象があります。

Figmaで提案資料を作成する際の注意点

Figmaは多機能で便利なツールですが、提案資料作成時にいくつか注意すべき点があります。

1. pptx形式での書き出しができない

FigmaではPowerPoint形式のファイルを直接書き出すことができません。そのため、PowerPoint形式が求められる場合、Figmaで作成したデザインを画像やPDFとしてエクスポートし、それをPowerPointに貼り付ける必要があります。このプロセスは少々手間がかかるため、納品形式を事前に確認しておくことが重要です。

2. クライアントが納品後に編集したい場合の制約

納品後にクライアント自身で資料を編集する可能性がある場合、PowerPointでの作成が必要になる場合があります。Figmaで作成した資料をPowerPointで編集可能な形に変換するプラグインは存在しますが、書き出し後のオブジェクトの表示崩れや文字化けの問題があり、完璧ではない印象があります。編集が必要なケースでは、最初からPowerPointを使用するか、FigmaとPowerPointの併用を検討するのがおすすめです。
 
これらの点を踏まえ、資料の最終用途やクライアントのニーズに応じた適切なツール選択を行うことが重要です。

おわりに

いかがでしたでしょうか？提案資料作成において、Figmaはデザインの自由度や効率性、共同作業のしやすさでPowerPointを大きく上回るツールです。この記事が、より効果的な提案資料作成の参考になれば幸いです。

【Figma】XDから移行した方へのおすすめプラグイン7選

作業ツールをAdobe XDからFigmaに移行した直後だと、標準機能の使い方に慣れるのに気を取られて、プラグインを活用しきれていない方も多いと思います。Figmaで利用できるプラグイン数は1000以上あるとされており、XDにはない便利なプラグインも数多く存在しています。
そこで今回はFigmaで作業するのに必須なおすすめプラグインを紹介したいと思います。

1. デザインに使えるプラグイン1-1. Iconify1-2. uiGradients1-3. Skew Me 3601-4. Unsplash2. 作業効率化のプラグイン2-1. Aspect Ratio 2-2. Insert Big Image2-3. Instance Finderおわりに

1. デザインに使えるプラグイン

1-1. Iconify

[ Iconifyの詳細はこちら ]

Material Design Icons や FontAwesome などの有名サービスのオープンソースのアイコンを検索して配置できるプラグインです。
使用できるアイコンの数は200,000以上、150 を超えるアイコンセットが用意されています。また、アイコンはベクター形式で使用できるため、色やサイズを変更することが可能です。ただし、日本語対応されていないため、アイコンを検索する際はキーワードを英語で入力する必要があります。

1-2. uiGradients

[ uiGradientsの詳細はこちら ]

uiGradientsはワンクリックでさまざまなグラデーションパターンを適用することができるプラグインです。350種類以上のグラデーションパターンが用意されており、グラデーションの配色を検討する際に非常に便利です。
使い方は適用したいオブジェクト（テキスト、グループ、フレーム）を選択後、プラグインを起動してグラデーションを選択するだけです。また、適用したグラデーションの色を別途調整することも可能です。

1-3. Skew Me 360

[ Skew Me 360の詳細はこちら ]

Skew Me 360 はオブジェクトをシアー（傾斜）変形することができるプラグインです。
水平方向、垂直方向に傾斜をつけることができるほか、シアー変形後も元の形に戻せる、テキストはシアー変形後も編集可、など非常に優秀なプラグインとなっています。
Figmaは標準機能ではシアー変形ができないため、ダイナミックなデザインにしたい、スポーティーなイメージを作りたい時に重宝します。

1-4. Unsplash

[ Unsplashの詳細はこちら ]

Unsplashは無料で使える高品質な写真素材サイトのことで、このプラグインを使用するとFigma上でUnsplashの写真を検索してインポートすることができます。
きれいな写真をデザインに使用したい時に手軽に探すことができるので便利です。また下記の手順で、Figma上の複数のオブジェクトに写真をまとめて流し込むこともできます。

1）画像を流し込みたいオブジェクトを複数選択する。
2）Unsplashを起動して1枚の画像を長押しする。
3）複数選択モードになるので画像を複数選択する。
4）インサートボタンをクリックする。

2. 作業効率化のプラグイン

2-1. Aspect Ratio

[ Aspect Ratioの詳細はこちら ]

オブジェクトや画像のサイズを特定のアスペクト比にすばやくサイズ変更できるプラグインです。
オブジェクトの比率を揃えるのに一つ一つ計算して設定するのは手間ですが、このプラグインを使用すると、オブジェクトを選択後に適用したい比率をクリックするだけでサイズ変更することが可能です。
また、黄金比（1:1.618）や白銀比（1:1.414）など特定の比率を適用したい場合も、数値を手動入力して適用することができます。UIもシンプルでおすすめです。

2-2. Insert Big Image

[ Insert Big Imageの詳細はこちら ]

Figmaで大きな画像（幅 or 高さが4096px以上）を挿入するためのプラグインです。
Figmaではファイル内に挿入できる画像サイズに上限値が設定されており、幅 or 高さのいずれかが4096pxを超えていると、自動的に4096pxに圧縮される仕様になっています。
そのためLPやサイトのキャプチャ画像を貼り付けた際に、画像が自動圧縮されて画質が粗くなってしまったという現象がよく発生しますが、このプラグインを利用すると大きな画像（高解像度）のまま読み込むことが可能です。
XDからFigma移行時のつまづきポイントでもあるので、忘れずに入れておきましょう。

2-3. Instance Finder

[ Instance Finderの詳細はこちら ]

プラグインを起動後、単一のインスタンスもしくはコンポーネントを選択して「Find」ボタンをクリックすると、ファイル内で使用されているすべてのインスタンスをページ別にリスト化してくれます。

XDでは標準機能でコンポーネントのインスタンスをハイライト表示できましたが、Figmaにはそのような機能がないため、コンポーネント管理では必須のプラグインになります。

3. おわりに

今回はFigmaのおすすめプラグインを紹介しました。新しいツールに慣れるのは大変ですが、便利なプラグインを活用すれば作業効率はむしろ向上していきます。ぜひ今回紹介したプラグインを活用して、Figmaでのデザイン作業が快適になれば幸いです。

DOLでは士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方や開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

【表参道】表参道の安くて美味しい居酒屋4選

「表参道」と聞いて、高級感・おしゃれ・敷居が高いというイメージを持たれる方が多いのではないでしょうか。もちろんそれらは表参道の魅力ですが、まだまだ隠れた魅力があります。今回は、表参道の安くて美味しい、隠れた老舗居酒屋を紹介します。

1. ほの字　青山店2. 居酒屋　中西3. 割烹しまだ4. 青山焼き鳥倶楽部　夜の部　焼鳥屋おわりに

1. ほの字　青山店

はじめにご紹介するのは「ほの字」です。
表参道駅B2出口から徒歩3分という好立地にあり、ランチはなんと1,000円です。ランチ時は店内が満席で、数分並ぶ可能性もあるため、時間に余裕を持って伺いましょう。
夜になると居酒屋に変身し、メニューは450円〜1,200円とどれもリーズナブルな値段です。
コースは2時間飲み放題付きで5,000円~5,500円とこちらもリーズナブルなお値段で、さらに3種類のコースから選ぶことができます。

出典元：食べログ
店名 ほの字　青山店
住所 東京都渋谷区神宮前5-50-2 青山エンジョウビル　Ｂ１Ｆ
営業時間 ランチ：11:30〜14:30（L.O：14:00）
ディナー：17:30〜23:00（L.O：22:00）
定休日 日曜日

2. 居酒屋　中西

次に紹介するのは「居酒屋　中西」です。
こちらはランチはなく、夜だけの営業となります。
サワー・とハイボールは毎日130円で飲むことができます。表参道エリアでは一番安いアルコールなのではないでしょうか。そしてなんと平日は3,380円、土日は3,680円で4人から食べ飲み放題が注文できます。こちらもコスパがよく美味しい居酒屋になりますので、お仕事帰りに寄ってみてはいかがでしょうか。

出典元：食べログ
店名 居酒屋中西
住所 東京都港区南青山3-13-8
電話番号 03-5413-3636
営業時間 ◼︎月・火・水・木
　17:00 – 23:30
　L.O. 23:00

◼︎金・土・祝前日
　17:00 – 02:30
　L.O. 02:00

◼︎日・祝日
　17:00 – 23:15
　L.O. 22:45
定休日 1/1、1/2

3. 割烹しまだ

三つ目は「割烹しまだ」です。お昼はうどんを中心としたランチを楽しむことができ、夜には居酒屋として利用できるお店です。
どのメニューも美味しいのですが、なんと言っても100名店にも選ばれたうどんは絶品です。ぜひ締めにカレーうどんを注文してみてください。他とは違うカレーうどんに虜になる人が続出しています。
また、こちらはお昼のランチでもカレーうどんを注文することが可能ですので、お昼時に伺ってみてはいかがでしょうか。

出典元：食べログ
店名 割烹しまだ
住所 東京都港区南青山3-13-3
電話番号 03-3403-0201
営業時間 月・火・水・木・金・土
11:30 – 14:00
18:00 – 00:00
定休日 第2・4土曜日
日曜日

4. 青山焼き鳥倶楽部　夜の部　焼鳥屋

最後に「青山焼き鳥倶楽部　夜の部　焼鳥屋」です。
表参道駅から徒歩3分、抜群においしくお値段も良心的な焼き鳥屋さんで、焼き鳥はなんと200円〜注文ができます。カウンターのみのお店のため、少人数で訪れることをお勧めします。
また20名以上から貸切利用も可能ですので忘年会などでのご利用もいかがでしょうか。さらに平日のお昼には、特製地鶏の鶏ガラ醤油ラーメンも提供され、夜とは違ったメニューが頼めるのも魅力の一つです。

出典元：食べログ
店名 青山焼き鳥倶楽部　夜の部　焼鳥屋
住所 東京都港区南青山5-10-5 青山ハイツ　Ｂ１Ｆ
電話番号 03-3486-1973
営業時間 17:30 – 23:30
定休日 年末年始・お盆期間2019年8月15日（木）～8月18日（日）

おわりに

いかがでしたでしょうか。表参道にはおしゃれで高級なお店だけでなく、気軽に立ち寄れる美味しいご飯屋さんもたくさんあります。
これを機会にぜひ、表参道の隠れた魅力を体験してみてください。

DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。