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

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

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. 費用を抑えてオリジナル性が高いサイトを作ることができる

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

1.Welcart

Welcart

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

2.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デザインとの違い

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

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

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

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

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

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

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.ウェブデザインに見る「和」の要素

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

配色

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

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

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

パターン・テクスチャ

出典元:日本伝統模様

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

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

タイポグラフィ

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

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

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

素材選び

出典元:freepik

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

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

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

縦書き

出典元:灯屋 迎帆楼(あかりや げいはんろう)

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

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

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

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

地域にちなんだサイト

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

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

飲食店のサイト

出典元:高砂寿司

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

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

工芸品のサイト

出典元:金色世界

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

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

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

イラストAC

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

Unsplash

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

ぱくたそ

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

おわりに

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

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

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

提案資料作成は、プロジェクトの成功を左右する重要なプロセスです。従来はMicrosoft PowerPointが主流でしたが、デザインや効率性の観点から、Figmaを使うことでより効果的な資料を作成できます。本記事では、PowerPointと比較した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. 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. ほの字 青山店

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

出典元:食べログ
店名 ほの字 青山店
住所 東京都渋谷区神宮前5-50-2 青山エンジョウビル B1F
営業時間 ランチ: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 青山ハイツ B1F
電話番号 03-3486-1973
営業時間 17:30 – 23:30
定休日 年末年始・お盆期間2019年8月15日(木)~8月18日(日)

おわりに

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

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

【表参道】打ち合わせや商談に使えるカフェ5選【南青山】

表参道エリアには、ビジネスシーンにもぴったりなカフェが多くあります。落ち着いた雰囲気やおしゃれなインテリアなど、いつもと違った環境で打ち合わせをすることで新たなアイデアが生まれるかもしれません。リラックスしつつ集中できる、そんな空間での打ち合わせは、仕事の効率を高める効果も期待できます。今回は、表参道で仕事の打ち合わせに使えるおすすめカフェ5選を紹介します。次の打ち合わせが有意義なものになるお手伝いができれば幸いです。

1. バラトンカフェ 表参道店

はじめにご紹介するのは「バラトンカフェ」です。表参道駅B3出口から徒歩1分という好立地にあり、席数が多くゆったりとした空間が広がっているため、多くのビジネスパーソンに利用されています。看板商品「クルトシュ」は、ハンガリーの伝統的な焼き菓子で、他ではなかなかお目にかかれない珍しさも魅力。打ち合わせ前のアイスブレイクにぴったりな話題になるでしょう。

出典元:食べログ / バラトンカフェ 公式Instagram
店名 バラトンカフェ 表参道店
住所 東京都港区南青山5丁目1−22 2F
営業時間 月〜金 7:00〜21:00
土・日・祝 8:00〜20:00
定休日 不定休
公式Instagram https://www.instagram.com/balaton_cafe/

2. 喫茶室ルノアール 青山花茂店

次に紹介するのは「喫茶室ルノアール」です。関東を中心に展開するカフェチェーンで、ゆったりした座席とシックな内装が特徴です。他のチェーンに比べコーヒーの価格は少し高めですが、広めの座席で落ち着いて過ごせるため、学生の勉強やビジネス打ち合わせにも多く利用されています。

出典元:喫茶室ルノアール 青山花茂店
店名 喫茶室ルノアール 青山花茂店
住所 東京都港区北青山3-12-9 青山花茂ビル2F
電話番号 03-6427-2431
営業時間 全日 7:30~22:00
定休日 不定休
Webサイト https://www.ginza-renoir.co.jp/shopsearch/shops/tokyo/minato-ku/aoyama-hanamo.html

3. スパイラルカフェ

三つ目は「スパイラルカフェ」。表参道の複合文化施設「スパイラル」内にあり、ギャラリーや多目的ホールに隣接した開放的な空間です。カフェのみの利用も可能で、静かな環境が整っているため、落ち着いて打ち合わせに臨めます。

出典元:スパイラルカフェ
店名 スパイラルカフェ
住所 東京都港区南青山5-6-23 1F
電話番号 03-3498-5791
営業時間 11:00 – 21:00
【LUNCH TIME】11:00 – 15:00
【TEA & DINNER TIME】 15:00 – 21:00 (FOOD 20:00 L.O./DRINK 20:30 L.O. )
定休日 ビルの休館に準ずる
Webサイト https://www.spiral.co.jp/shoplist/spiral_cafe

4. 三十間 青山店

続いて「三十間」。表参道B2出口から徒歩3分の距離に位置し、産地や豆にこだわる本格コーヒー専門店です。内装はナチュラルでリラックスできる雰囲気が漂い、集中して打ち合わせができる環境が魅力。コーヒーには産地や特徴を記したカードが添えられ、会話のきっかけにもなります。

出典元:三十間 公式Instagram
店名 三十間 青山店
住所 東京都渋谷区神宮前5-51-6 テラアシオス青山2F
電話番号 03-6427-3110
定休日 不定休
Webサイト https://sanjikken.net/aoyama/

5. カフェラントマン 青山

最後にご紹介するのは「カフェラントマン」。1873年創業、オーストリア・ウィーン発祥の由緒あるカフェです。重厚な内装と落ち着いた雰囲気が魅力で、大切な打ち合わせの場にもふさわしく、気兼ねなく話を進められるでしょう。

出典元:カフェラントマン 青山 公式Instagram
店名 カフェラントマン 青山
住所 東京都港区北青山3-11-7 AOビル4F
電話番号 03-3498-2061
営業時間 月曜日~土曜日 11:00〜23:00
日・祝 11:00〜22:00
定休日 不定休
Webサイト https://www.giraud.co.jp/landtmann/

おわりに

いかがでしたでしょうか?表参道のカフェは、ただ飲食する場にとどまらず、ビジネスの場としても魅力的な環境が揃っています。表参道の心地よい空間で、いつもとは違う打ち合わせをぜひ体験してみてはいかがでしょうか。

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

ウェブデザイナーが快適に働くためのおすすめグッズ

デザイナーの仕事はどうしてもデスクワークになってしまいます。健康に影響が出ないように工夫して仕事をしなければいけません。
今回は、現役デザイナーが現場で実際に使用している、デスク周りアイテムをご紹介します。
 
快適な仕事をするために身の回りを一緒に整えていきましょう。

1.昇降デスク

一日中座って仕事をしていると血行が悪くなり健康に被害が出ます。なので一時間に一回は立って作業を行うと良いでしょう。その時にこの昇降デスクをおすすめします。これを使用すると立ちながら仕事をすることができます。
 
 

商品名 山善 昇降デスク 電動 昇降式デスク スタンディングデスク 上下昇降 pc オフィスデスク テレワーク メモリー機能 衝突検知 USBポート付き 120×60×71-116cm 耐荷重60kg 組立品 ブラック/マットブラック AED-1260 BK/MBK
金額 ¥32,800(税込)
ストア Amazonで詳細を見る

 
しかし昇降デスクは安くても30,000円台〜です。もう少し費用を抑えたい方や、すでに机を持っている方にはこちらをお勧めします。
 
 

商品名 RELAXWORK スタンディングデスク ガス圧式無段階高さ調整卓上 折りたたみデスク リフティングテーブル 持ち運び 座位・立位両用 上下昇降式ワークデスク幅78.5×52cm 高さ調整範囲:5.5~41cmローテブル
金額 ¥6,080(税込)
ストア Amazonで詳細を見る

 
このような卓上の昇降デスクだと場所も取らず、コスパも良いため、すぐに手にいれることができます。

2.ノートパソコンスタンド

ノートパソコン本体をスタンドに置いて高さを調節するものになります。
スタンドがない場合ですと、首が曲がって姿勢が悪くなりがちです。ですがこちらを使用するとPC画面と目線が近くなるので、姿勢を崩さずに作業を行うことができます。こちらは小さいグッズなので持ち運ぶことが簡単になっていますが、さらにコンパクトに使用するにはPCに直接貼るシートタイプがお勧めです。PCにつける事で、かさばることなくPCケースに収納することができます。そして持ち運びもさらに簡単になるため、場所を選ばずに正しい姿勢で作業を行うことができます。
 
 

商品名 【貼ったまま持ち運べる超薄型】ノートパソコンスタンド ノートPCスタンド 貼り付けっぱなしOK 薄型 11-16インチ対応 耐荷重5kg 二段階調整 二段階調節 放熱穴 付き 超軽量 繰り返し粘着可能 持ち運び 粘着タイプ 姿勢改善 肩こり 腰痛 猫背 防止 ストレートネック PCスタンド パソコンスタンド (ダークグレー)
金額 ¥2,190(税込)
ストア Amazonで詳細を見る

3.トラックボールマウス

細かい作業をこなすデザイナーが普通のマウスを使うと、手首への負担が多くなり、腱鞘炎になる可能性があります。なので手首への負担が少ないトラックボールマウスを使用をお勧めします。私も以前までは普通のマウスを使用しており、トラックボールマウスを使うことは難しそうと考えていたのですが、実際に使ってみると作業も早く行うことができました。
ですが、こちらは好みにもよると思います。一度お試しキャンペーンを活用してみてはいかがでしょうか。
 
お試しキャンペーンはこちら
 

商品名 ERGO M575SP
金額 ¥8,470(税込)
公式サイト こちら

4.リストレスト

こちらはマウスを操作する手の下に置くことで、手首への負担を軽減させるアイテムのことです。手首に置く、クッションのようなものになります。
前述のトラックボールマウスを併用して使用すると、より手首への負荷がかからないものになります。そして、もしトラックボールマウスが合わない方場合は、リストレストを使うことを推奨します。もしくは、手首を保護するクッションがついているマウスパットもあるのでぜひご自身に合うものを探してみてください。
 
 

商品名 UnivoColors 人間工学に基づいたメモリフォームマウス用リストレスト プレミアムPU素材 低反発クッション 手首サポート PCゲーム&オフィスワークに最適 疲労低減 体圧分散性能 手首痛み緩和 底面に滑り止め(グレー,wr)
金額 ¥1,698(税込)
ストア Amazonで詳細を見る

おわりに

いかがでしたでしょうか。仕事の効率をあげ、健康的に働くために身の回りのガジェットやグッズについて一度考えてみてはいかがでしょうか。快適なデザイナーライフを手に入れましょう。
 
DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。