サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
pantograph.co.jp
「トンマナ」とは「トーン&マナー」の略称で、デザインやスタイル、文言などに一貫性をもたせるルールのこと。「調子や色」という意味を持つトーン(tone)と、「様式や作風」という意味を持つマナー(manner)を組み合わせて作られた言葉です。 元は広告・出版業界の用語ですが、近年では企業のブランド戦略やWebデザインなどでも広く使われています。ちなみに、英語圏では「tone and style」の方が一般的な呼称です。 「トンマナ」を設定することで、コンテンツに一貫性・統一性が生まれ、企業の世界観を印象付けることができます。 例えば、パンタグラフのコーポレートサイトでは、青や白を基調としたトンマナを設定し、各ページの印象を統一しています。 <トンマナ設定の例:パンタグラフのコーポレートサイト> 文章のトンマナにかかわる「文体」については、「「文体」とは?意味・種類・記事タイプ別の事例を紹介!」
PWAは、Webサイトを「アプリ化」する技術のことで、現在では多くのWebサイトに取り入れられています。 その理由は、ユーザーエクスペリエンスの向上につながり、アプリよりも開発コストを削減することができるからです。 そこで本記事では、PWAとは何か、導入するメリット・デメリットなどを紹介します。Webサイトのアプリ化を検討している方は、ぜひ参考にしてみてください。 PWAとは「Progressive Web Apps」の略で、Webサイトをネイティブアプリのように利用できるようにする仕組み・技術のことです。 ネイティブアプリとは、iPhoneならApp Store、AndroidならGoogle Playといったアプリストアからインストールして使用するアプリのこと。「アプリ」と聞いて多くの人がイメージするのが、このネイティブアプリでしょう。 PWAを実装したWebサイトは、オフラインで動作
インタラクションデザインとは何か?メリットや事例をわかりやすく解説! UI/UXデザイン 2023.05.09 webサイトやアプリのデザインにおいて、「インタラクションデザイン」という言葉が登場する機会が増えてきました。 デザイン業界の中で重要度を増している一方、どのようにすればインタラクションデザインになるのか分からないという方もいるかもしれません。 そこでこの記事では、インタラクションデザインについてわかりやすく解説します。 メリットや事例についても紹介しますので、ぜひ参考にしてください。 インタラクションデザインとは「相互作用の設計」 インタラクション (interaction)とは、日本語で「相互作用」と訳されます。 IT用語としては、「ユーザーが特定の操作を行なったとき、システムがその操作に応じた反応を返すこと」という意味で使われています。 つまり、インタラクションデザインは、
プロトタイプ(prototype)とは、「試作モデル」の意味です。例えば、新しい製品の開発やゲームなどのソフトウェア開発において、初期段階にプロトタイプを作成します。 また、プロトタイプをもとに操作性、バランス、機能などを確認し、ユーザーからの評価を正式リリース前に反映させる開発手法を「プロトタイピング」と言います。開発途中で確認・修正ができるため、結果的に工程数が減り、問題点を早期に発見できるメリットがあります。 今回は、プロトタイプのメリットや種類などを紹介します。 プロトタイプが必要な理由 現代では、自動車やスマートフォン、アプリなど、多くの製作の場でプロトタイプの作成が行われます。プロトタイプはなぜ必要なのでしょうか?プロトタイプが求められる理由について紹介します。 製品の仕様を完全に伝えることが不可能に近いから ソフトウェア、アプリ、Webシステムなどの担当者が、デザイナーや開発
高齢化に伴い、今後ますますWEB業界では課題としてあがるアクセシビリティ。 WEBサイト制作の際に課題としてあがるシーンも多いのではないでしょうか。 今回はそんなアクセシビリティとして対応したい10の具体的ポイントをご紹介します。 そもそものアクセシビリティについての概念も解説するので併せてお読みください。 アクセシビリティとは アクセシビリティとは、特にWEBサイトにおける情報・コンテンツへのアクセスのし易さのことを指します。 高齢者や障がい者など、体の機能が十分ではなく、WEBサイトの情報をうまく取得できない場合や、健常者でもうるさい・暗い・通信回線が弱いなどの情報を取得し辛い環境下でWEBサイトを閲覧する場合を想定し、情報へのアクセスのしやすさを図る概念です。 アクセシビリティというと、どうしても「バリアフリー」のような”高齢者・障がい者に優しい設計”というイメージをしがち(実際想定
1|「アイコン追加」・「プッシュ通知許諾」メッセージの表示パターン 今回紹介する各事例ですが、「ホーム画面へのアイコン追加」を促す方法と、「プッシュ通知」の許諾の取得方法を、前回の記事と同様にそれぞれ3パターンに分類しています。分類した各パターンを再度記載しておきます。 ホーム画面へのアイコン追加 パターン①:メッセージ表示なし(ユーザーが自発的にブラウザメニューから設定) パターン②:サイト閲覧時にデフォルトでメッセージを画面下部に自動表示 パターン③:アイコン追加を促す方法に工夫がある パターン①:プッシュ通知配信許諾のメッセージなし(またはプッシュ通知配信なし) パターン②:サイト閲覧開始直後にブラウザ固有の許諾ダイアログを自動表示 パターン③:許諾取得の方法に工夫がある 尚、以下の各事例がどのパターンに分類されているかは、「ホーム画面へのアイコン追加」「プッシュ通知許諾」のそれぞれ
【最新版】マーケティングオートメーション(MA)ツールを徹底比較!自社に合うツールの選び方とは? マーケティング 2018.01.24 2015年にマーケティングオートメーションが注目を集めるようになってから早3年。いまでもマーケティングオートメーションに向けられる注目度はとどまる所を知らず、高まり続けています。 以前に比べると、弊社:株式会社パンタグラフにもマーケティングオートメーションに関する導入・運用のご相談が増えている状況ではありますが、正直なところ「マーケティングオートメーション」というキーワードと漠然としたイメージだけが先行してしまっており、まだ正しい認知が低いような印象を受けています。 そこで今回は日本国内で導入が進んでいるマーケティングオートメーションツールを中心に、 実際に導入することは決めたけど、自社に合うマーケティングオートメーションツールってどれだろう? 気になる初
サイトの印象を左右するファーストビュー。 サービスの業界やカテゴリによってファーストビューの構成は大きく異なります。 今回はファーストビューが象徴的であり、洗練されたデザイン特長を持つサイトを分類し、PCサイト・SPサイトそれぞれご紹介します。 あなたが作ろうとしているwebサイトのヒントになれればと思います。 ファーストビューとは ファーストビューとは、Webサイトにおいてユーザーが訪れた際に最初に目に入る部分のことです。 ページの上部エリアのことであり、定義としてはそのページをスクロールせずに表示された部分のことを指します。 また、ファーストビューにて見せる、ユーザの目を惹く大きな写真・イラストを”メインビジュアル”と呼びます。 ファーストビューは、ユーザーがそのWEBサイトに滞在するか離脱するかどうかが大きく影響する部分であり、WEBサイト制作の際には特に重要な部分となってきます。
PWAのメリットを最大限活かす!ホーム画面アイコン追加とプッシュ通知のUIパターンを徹底解説! UI/UXデザイン 2018.06.22 現在、モバイルインターネットを取り巻く環境で「PWA」が大きな注目を集めています。 PWAとは、Progressive Web Apps(プログレッシブウェブアプリ)の略で、モバイル端末でウェブサイトを表示する際に、まるでネイティブアプリのようなUIや挙動を可能にする仕組みです。この仕組みによって、モバイルユーザーのUX向上が期待されています。PWAを導入することで、例えばページの読み込みや表示時間が高速化される、オフラインでも動作し閲覧が可能になる、など様々なメリットが得られますが、うまく活用することでユーザーとの接触機会の増加が期待できるという点も大きな魅力ではないでしょうか。この「ユーザーとの接触機会の増加」に効果を発揮するであろう機能が「ホーム画
Webサイトやアプリにおいて、ユーザと次のコミュニケーションを発展させるための重要なひとつの通過点である入力フォーム。 しかしながら”使いやすさ”の観点から、ユーザーが多く離脱してしまう入力フォームが多数世の中に存在しているように思えます。 あなたが運営するサイトの入力フォームは使いやすいでしょうか? 入力フォームの目的・ユーザーに対して正しく最適化されているでしょうか? 多数大手サイトのヒューリスティック分析を行うパンタグラフが入力フォームの良い例を具体的にあげていきます。 良いポイントと悪いポイントは表裏一体なので、悪いポイントは以下のポイントの逆だと捉えていただけると良いかもしれません。 ぜひ、現在運用中または制作中のサイトの入力フォームと照らし合わせてみてくださいね。 パンタグラフのヒューリスティック(専門家視点)分析はコチラ ▼入力フォームについて考察した関連記事 ・入力フォーム
ユーザーにとってわずらわしい作業である個人情報などの入力作業。 自宅でじっくりと向き合って操作するデスクトップパソコンと異なり、「画面が小さい」といった操作的な課題、「外出中」といった時限的な課題を抱えているスマホなら更に面倒でです。 設計としては細部にまで行き届いた配慮が必要不可欠であり、そこには「スマホならではの入力フォームのノウハウ」が必須となってきます。 あなたが担当する入力フォームは本当にスマホに最適化されているでしょうか? PC優先で設計した入力フォームをそのままスマホへと展開していませんでしょうか? 多数大手サイトのヒューリスティック分析を行うパンタグラフが、スマホにおける入力フォームのそうしんかいすうコンバージョンを上げる基本の5つの技と具体的な2つの例をまとめました。 例えば、一般的に外出先で気軽に検索するシーンが多い、ファッション/賃貸/レジャーなど、スマホがメインのサ
Googleの提供するDFP(DoubleClick for Publishers)とは? DFPとは、Googleが提供しているウェブサイト(主にメディア系)に広告を配信・管理するためのアドサーバーです。 このツールを利用することで、1つの広告枠に純広告とアドネットワーク(AdSenceやその他アドネットワーク、ASP等)を効率的に配信することが可能になります。 例えば、あなたが運用を担当しているウェブサイトが成長軌道に乗り、広告による収益化が進むと、広告枠自体の価値が上がりますよね?それに伴い、社内外より取り扱う製品やサービスの宣伝や広告出稿の依頼が入ってくるようになるはずです。 とはいえ、ウェブサイトに設置できる広告枠には限りがあるので、収益を最大化するには「インプレッション保証の純広告の導入」や「余剰な空き枠の活用」は必然・・・。 「一体どうすれば?」と、さらに運用担当者を悩ませる
・サイトに検索からの流入を増やしたい ・商品ページに人が集まらない などに困ったことはありませんか? 上記の悩みは、いわゆる“SEO対策”をすれば、解決しそうな問題です。しかし、具体的な策がわからず、悪戦苦闘中というウェブマーケティング担当者も少なくないでしょう。 最近では、コンテンツマーケティングが普及してきたこともあり、「狙ったターゲットに適切な情報を届ける」ことがGoogleからの評価を上げる1つの策であることがわかってきました。 しかし、それだけでは不十分です。検索エンジンに好かれるサイトになるためには、サイトの力(内容だけでなく表示速度の速さなどの技術的な側面)も非常に重要なポイントになります。 そこで今回は、現在モバイルサイトの改善において最もホットな施策と言っても過言ではない『PWA対応』について、国内の事例とともにご紹介します。 読み込み速度や表示の高速化といったサイト強化
弊社ブログではユーザビリティ向上のための入力フォームルール記事を、2回に分けてお伝えしていたのですが、今回は実際の事例を集めてみました。 デザイン面からもUI面からも、参考になるようなサイトを厳選して選定しており、既出の記事に合わせて、本内容も読んでいただくとより理想的なデザインの入力フォームがイメージつきやすいかと思います。 入力フォームの設計に携わるデザイナーさんたちには、ぜひ読んでいただきたい内容です。 ▼入力フォームについて考察した関連記事 ・入力フォームの制作ルールを紹介・解説 【ヒューリスティック分析】入力フォームを改善して送信数を上げる10の技 【スマートフォン編】入力フォームの送信数・CVRを上げる5つの改善策 ・入力フォームの参考サイトを紹介・解説 現役UIデザイナーが制作した入力フォームを自身で解説!【WEB屋必読】 判断基準:10のポイント こちらの10のポイントと照
現役UIデザイナーが制作した入力フォームを自身で解説!【WEB屋必読】 UI/UXデザイン 2017.12.15 入力フォームについて様々な角度から考察させていただいたPantographのUIデザイナーが、今回は実際にデザイン制作した入力フォームを解説させていただきます。 実際の制作物を、デザイナー本人がこうして記事を通して解説することは滅多にないので、UIデザイナーさんもそうでない人も、WEBに携わるすべての人にお読みいただけたら嬉しいです。 ▼入力フォームについて考察した関連記事 ・入力フォームの制作ルールを紹介・解説 【ヒューリスティック分析】入力フォームを改善して送信数を上げる10の技 【スマートフォン編】入力フォームの送信数・CVRを上げる5つの改善策 ・入力フォームの参考サイトを紹介・解説 【2018年版】入力フォームのデザイン設計に参考にしたいサイト事例8選 制作過程におけ
<!doctype html> <html> <head> <meta charset=”utf-8″> <title>タイトル</title> ・・・ <link rel=”stylesheet” href=”CSSファイル”> <script type=”text/javascript” src=”JSファイル”></script> ・・・ </head> <body> <!— コンテンツ —> ・・・ </body> </html> htmlファイルは記述された上から順に実行していくので、「CSSファイル」と「JavaScriptファイル」を読み込んだ後に、bodyに記述されている「コンテンツ(=画面に表示される画像やテキスト)」を表示します。 つまり、JavaScriptとCSSのファイルサイズが大きければ大きいほど、この部分の読み込みに時間がかかることになり、結果、なかなかコンテ
WebサイトやWebメディアを運用する上で見逃せなくなってきたWebプッシュ通知。 更新時のプッシュ通知を簡単に実装できるサービスも続々と増えており、すでに導入しているサービスも多く見掛けるようになりました。 なぜWebプッシュ通知が重宝されつつあるのか? 一番のメリットは、Webプッシュ通知を行うことで、ユーザーの再訪問を促し、関心の高いユーザーをコンバージョンへ繋げられる点にあります。 初回訪問時にコンバージョンへ導けなかったユーザーに、再度アプローチすることは効率の良いコミュニケーション手法です。 また、Webプッシュ通知は、一度通知承認を獲得したら、ユーザーがブラウザ設定変更を行わない限り、メッセージを届けることができるため、非常に手厚いコミュニケーションを実現することができます。 Webサービスのコンバージョン割合の6割は再訪問者であるレポートも報告されています。 【引用元】コン
スマートフォンサイトで普及率の高いハンバーガーメニュー事例、デザインのメリットデメリットと活用方法 UI/UXデザイン 2017.08.04 スマートフォンサイトはもちろん、PCサイトにおいても「ハンバーガーメニュー」が採用されているページをよく目にします。 今回は「ハンバーガーメニュー」と呼ばれるメニューをはじめ、「ヘッダー・フッターメニュー」や「スプリングボード」、「タブメニュー」といった様々なスマートフォンサイトのメニューのUIを調査しました。 御社のサービスやコンテンツに合わせて効果的なメニューを構築することで、ユーザーの利便性を高めることができます。 ハンバーガーメニューとは 「ハンバーガーメニュー」とは、横に三本のラインが入ったボタンデザインのことを指します。アイコンデザインがハンバーガーのように見えることから、そのように呼ばれるようになりました。 「ハンバーガーメニュー」をタ
消費者は、テレビ、パソコン、スマホといった情報洪水の迷路に入り込んでいる。 企業はその溢れかえった情報の中で、消費者の興味と関心の争奪戦を繰り返さなければならない。 インフルエンサーマーケティング広告の背景 広告としてメッセージを発信しても、企業からの情報は消費者には届かない。 だから同じ消費者としての立場から、商品やサービスの体験談やクチコミとして発信してもらう。 消費者からすると『あの人が好きなものなら間違いない』と、購入時の大切な判断基準の指針になる。 友人からのおススメと同じ感覚で参考情報にする。 雑誌広告予算を、インフルエンサーマーケティング予算へ投下する企業が増えてきている。 インフルエンサー広告を利用する企業とは? では、どのような企業やサービス、ブランドがインフルエンサーマーケティングを重要と捉えているのだろうか。 インフルエンサーマーケティングを実施する企業には共通した課
【引用】Directus Inc. 2014年 企業から配信されるメールのスマートフォンにおける受信状況アンケート調査報告 全体の約3割の人がメールの閲覧において「スマートフォンファースト」であることが分かりました。主にPCで見ている人も加えると9割以上の人がメールをPCとスマホの両方で見ています。一方で「パソコンのみで見ている」と答えた人の割合も増加しました。 いずれにしても企業がPC向けメールを配信する際には、PC・スマホ両方で閲覧されることを想定することはもはや当たり前の状況と言えそうです。 『パソコンでもスマートフォンでもどちらでも見やすく表示させたいけど、パソコン用のメールとスマートフォン用のメールを2本制作し続けることは運用コスト的に難しい。』という時には「レスポンシブhtmlメール」がひとつの対策としてオススメです。弊社でも昨今制作の依頼が増加しているレスポンシブhtmlメー
「guide glass」は、ウェアラブルデバイスを用いて視野映像と位置情報を共有することで、自分の周りの状況の案内や説明を受けることができるサービスです。離れた場所にいる人と視野を共有することで、ハンズフリーで自分の目の代わりとなってもらうことを実現します。 私たちはこのテクノロジーによって、より多くの人たちの世界が広がり、より多くの人たちが自由に歩ける社会を目指しています。 ガイドグラスの特徴 - Features - 音声通話 眼鏡型端末利用者と接続相手との間で音声通話ができ、会話によるコミュニケーションが可能です。眼鏡型端末利用者は相手と会話しながら道案内や説明を受けることができます。 視界の共有 眼鏡型端末のカメラが捉える視界映像が接続相手にリアルタイムで共有され、相手は遠隔からでも周囲の状況を確認することが可能です。 眼鏡型端末利用者は自分の周りの状況が相手と共有された状態で、
ストーリー 女子高生2人がお互いをスマートフォンで撮影し合っている内に追いかけっこに。 側転やバク転や、後方宙返り、飛び込み前転、次第にアクションが過激になっていく。 学校の排水管を登り、校舎5階から飛び降りる、「まきびし」「変わり身の術」「けむり玉」などの忍法も随所で披露。 神社ではお辞儀、城の屋根を走り抜け、最後は天守閣からのダイビング。海辺で追いつき、最後はCCレモンで乾杯。 以下サントリーの炭酸飲料C.Cレモン「忍者女子高生」が今後のバイラルムービーのお手本と言える構成で成功を収めたポイントを5つ挙げさせて頂きます。 (1)素人投稿的演出 今回女子高生同士がスマートフォンで撮影し合っているところからストーリーが始まります。 当然現場でスマートフォン撮影されたわけではないのですが、 この導入部分を作ることで視聴者側の“スマホで撮影→素人によるアップ→ハプニング映像”としての期待値を一
「何でこの画像はこの位置にあるんですか?」「何でこのボタンはここに並べているんですか?」 と聞かれることがある。 そんな時、スマートフォンの持ち方をひとつ理由にすることがあるので紹介したい。スマートフォンにおけるUI/UX設計の参考として端的に整理されているガイドライン、そのひとつがapple社の提供するiOSヒューマンインターフェイスガイドラインである。その中で本記事にて取り上げたいのは「スマートフォンの持ち方から考える画面設計」である。 アップルはスマートフォンの持ち方をこの3パターンと定めている 持ち方(1) 「逆利き手持ち」 利き手の逆の手でデバイスを支え、利き手の人差し指を使って操作する。 持ち方(2) 「片手持ち」 利き手を問わずデバイスを握った一方の手の親指を使い操作する。 持ち方(3) 「両手持ち」 両方の手でデバイスを支え、両方の手の親指で操作する。 スマートフォンの持ち
すべてのお客様に パートナーマインドを持って ご一緒していくことをお約束します。 パンタグラフは顧客視点でサービスの持つ課題と最適な解決方法を見つけ出し、共にサービスを成長させていくためのチームです。 自分たちの経験をベースに課題解決のプロセスに落とし込み、 すべてのお客様にパートナーマインドを持ってご一緒していくことをお約束します。
このページを最初にブックマークしてみませんか?
『株式会社パンタグラフ | Pantograph Inc.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く