サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.i3design.jp
デザインシステムの定義 デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。 デザインシステムを作る目的としては、複数のデジタルプロダクト・サービスを展開する際にブランドの一貫性やデザイン品質を担保したり、運用を効率化させるという点が挙げられます。 デザインシステムの構成要素 デザインシステムを構成する3つの要素 デザインシステムの構成要素を3つに分けると、以下のようになります。 デザイン原則 原則に基づいたルール(スタイルガイド) 原則に基づいたツール(コンポーネントライブラリ) それでは、各要素について詳しく解説していきます。 デザイン原則 プロダクトに関わるステークホルダーがプロダクトを作っていく上
現在、CSSによる画面開発はレスポンシブデザインであることが当たり前となっており、Bootstrap・Semantic UI・BulmaなどのCSSフレームワークの充実により、高度なレスポンシブ対応CSSを簡単に生成することができ、AutoprefixerやLinterを含んだ開発環境を構築することで、マークアップ作業時にベンダー個別による不具合やタイプミスによる不具合は考えなくて良いほど少なくなっています。 それでも人が手でCSSをカスタマイズする場合は、表示崩れ、不具合との戦いになります。 しかし、それらの不具合はパターンがバラバラであるように見えて、実は根本的な原因がほぼ同じである可能性が高いです。 この根本的な原因に焦点を当て、特に開発現場で多く発生している原因を3つに絞って解説した上で対策方法を探っていきましょう。 表示崩れの根本的な原因を発生頻度でまとめるとほぼ以下のようになり
こんにちは。i3DESIGNのデザイナー 小島です。 突然ですが、皆さんは何か商品(おもちゃ・ゲーム・楽器 etc)を買った時、付属されている説明書を読んでから使い始めますか? 私は元々読まないで使い始めるタイプでした。しかし、途中で使い方が分からなくなり説明書を読み直したり、使うことを挫折したりしていました。※最近は読むようにしています。 なぜこのようなことが起きていたか振り返ると、 ・説明書が分厚くて読み込むハードルが高く感じる ・説明が複雑で分かりづらい こんなことが考えられます。 この話は身近なアプリでも同じことが言えるのではないでしょうか。 ユーザーが初めてアプリに触れる際、必ずと言っていいほど目にする「チュートリアル」 この「チュートリアル」がアプリにとっての「説明書」のような位置付けで、アプリの使い方をユーザーに分かりやすく伝える目的があります。 しかしこれに果てしなく長い文
こんにちは、i3DESIGNエンジニアの田口です。 今回は「React初学者が必ず押さえておきたい考え方とは?」というテーマでお話します。 こちらの記事は、下記のような方を対象としています。 プログラミングを学習中でフロントエンドの技術に興味のある方 Reactを触ったことはないが、興味がある方 私自身が、HTML, CSS, Pug, Sass, JavaScriptでの開発から、Reactでの開発に移行してからの約半年で感じた体験をもとにお話し致します。 まず本題に入る前に、簡単にReactの説明をします。 Reactとは? Reactとは、Facebook社とコミュニティによって開発されているユーザーインターフェース(UI)構築の為のJavaScriptライブラリです。 実は、Reactはフレームワークではなく、ライブラリです。(Vue.jsやAngular.jsはフレームワーク、j
こんにちは。i3DESIGN新卒デザイナーの吉尾です。 最近、プログラミングが不要でWeb開発ができるノーコードツールの一つ、”Webflow”を使ったサイトリリースがあり、色々と発見がありましたので、Webflowについて特徴や基本的な使い方、今回のサイトリリースでの実際に利用した機能、メリットデメリットをご紹介したいと思います。 未経験者の方にとっては少しハードルが高いかもしれませんが、この記事を読んで全体像を把握し、実際に手を動かして頂ければと思いますので是非最後までお読みください。 Webflowとは? コードを書かずにWebサイトやWebアプリケーションを作る為の環境としては、DreamweaverやBindのようなアプリケーションの他、Wix、Jimdo、STUDIOなどのWebベースの開発環境などがあります。 数ある環境の中でも特に人気のある開発ツールがWebflowです。
1. タブバーのアイコンをタップしてフォーカスできるようにする SpotifyやNetflixなどのアプリではタブバーの検索タブを2度タップすることで検索フォームにフォーカスするようになっています。これはiPhoneXなどの端末が登場して、長い画面の画面上部がタップしづらくなったことが背景にあるようです。今後標準的な機能になっていきそうな予感なので、ぜひ取り入れていきたい機能です。 2. ヒントを出す。文字を打っている時も結果を返す。 過去のキーワードを表示したり、キーワードのヒントを出しましょう。 ヒントを出す機能はユーザーの入力を楽にするだけでなく、スペルミスなどのエラーを予め防止する効果もあります。 3. どんな商品があるか匂わせる。人気・トレンドを表示する。 トレンドなどの情報を出すのもユーザー体験の向上に役立つでしょう。 人気のキーワードなどを表示することで、タイピングの必要がな
著者: Moses Kim UX writer and researcher at Shakuro digital agency. Other than that, jiu-jitsu and games こちらは、UX Planetから許可をいただいて翻訳・掲載している記事・画像です。Mobile UI Design Trends In 2018 今年のMobile World Congress で、今後数年間のアプリケーション開発者がどんなペースで動くかをうらなう、感動的かつ最新のAndroid端末が発表されました。 私たちは、ハードウェアやフォームファクターやリソースなど、製造者から提供されるものに合わせることに慣れてきました。携帯電話のデザイナーたちは、もともとは何も機能がなかったパーツに多くの方法で機能を追加することで製品を完成させてきました。様々なことが実践されてきたとともに、
こんにちは!デザイナーの佐々木です。花粉症が辛い季節になってきましたが、頑張って乗り切りたいところです。 最近アイスリーデザインでは、デザインシステムやスタイルガイドの作成を進めています。 一つ「これだ!」というスタイルを決めるためには、様々な議論や考慮を重ねて、頭をひねって考える必要があります。例えばボタンのサイズ一つ決めるだけでも、そのプロセスではデザイナーそれぞれのモック作成時の癖に気付いたり、今まで考えもしなかった発見がありとても勉強になります。 今回は、実際に参考にした公開されているものから10のスタイルガイドを選びました。 デザインシステムと呼ばれるものからパターンライブラリーまで広く扱っていますので、ご自分で作成する際には是非参考にしてください! 1.Lightning Design System https://www.lightningdesignsystem.com/
2018年、あけましておめでとうございます。AMPソリューション「Rabbit(ラビット)」のプロダクトマネージャーの及川です。 AMPページが有効かどうかをチェックするツール「AMPテスト」をGoogleは公開していますが、AMPテストにGoogle検索からアクセスできることはご存知でしょうか。 Google検索で「AMP test」「AMP HTML SEO」といったキーワードで検索することで「AMP ページのテストとプレビュー」ボックスを表示することができます。 それでは早速試してみましょう。 本オウンドメディア「in-Pocket」はAMP対応していますので、in-Pocketのトップページで実行してみます。 「AMP ページのテストとプレビュー」ボックスのURLに「https://amp.i3design.jp/in-pocket/」を入力し[テストを実行]ボタンをタップします。
2000年当時、私がまだソフトバンクにいた時代には、「ビジネスモデル特許」という言葉が持て囃されていました。当時、やっていた事といえば、いまのようにUXの観点からビジネスを創造するというよりも、あるビジネスモデルを逆さにしたり、裏返したり、斜めにしたりして、市場機会の創出を行っていました。もしくは市場調査や統計情報からビジネス機会を導いていくようなことをしていました。 そのアプローチからすると、時代は大きく変わって、いまやITのサービス開発において「UXデザイン」は欠かせないものになってきました。 当社は自社のクラウドサービス(GOMOBILE)の提供と受託開発の2つの車輪で事業を展開しています。受託開発では主に、大企業かベンチャー企業の新規のIT事業のサービスとシステム開発を得意分野としています。 具体的には、Lineを使ったBotの開発から、Iot関係のサービス開発、C2Cを対象にした
こんにちは。i3DESIGNでデザイナーの佐々木です。最近アプリタイトルについて色々と調べる機会があったので、こちらに残しておきたいと思います。 アプリタイトルについてはオフィシャルな情報が少なく、ググってもまとまった情報が出てこないのが辛いところです。数年前の内容からすっかり変わっていたり、iOS10の場合どうなの?等々あるので常に情報をアップデートしないといけません。 今回はアプリを作る上で最低限必要なタイトルを決めるための手がかりとなればと思います。また、特に検索に強くするための工夫などは細かく言及していません。 1.アプリタイトル3つ ここでは、iOSとAndroidのアプリを作る上で必要なタイトルを以下の3つとします。 1.アプリ名(呼称) 2.ホーム画面の下にあるタイトル 3.ストア掲載されるタイトル これらは別々に定めるもので、1つのタイトルを決めるわけではありません。それぞ
こんにちは、アイスリーデザイン、プロジェクトマネージャーの間藤です。 アイスリーデザインではPCサイトをSPサイトに変換するSMARTCONVERTやFlamingoの他、最近はPCサイトをAMPサイトに変換するRabbitといった自社サービスを提供しており、僕はプロジェクトマネージャーとしてこれらのサービスの導入支援を行なっています。 今回、WordPressのプラグインであるWP REST APIが、Wordpress 4.7からコアに取り込まれ、色々と応用ができそうだったので、その結果を記事にしてみました。 ちなみに、この記事を書く前までは「WP REST API?ごめんなさい、聞いたことありません。」という状態で、なかなかWP REST API について理解するのにも苦労したので、「WP REST API」初めてです、という方にも分かりやすいように記事を書いていく気持ちです。 目次
◆こんな人におすすめ ・そもそもUX/UIの違いが分からない ・UX/UIを勉強したいけど、どこから手をつけていいか分からない etc ◆ポイント ・「UX/UI」 それぞれの役割と違いを学ぶ時、まず確認したいスライド ・タイトル通り、エンジニアにも分かりやすい内容になっている ボリュームはあるけど、基本的なことはこれでOK ◆こんな人におすすめ ・UIデザインとUXの超基礎を読んでさらに勉強したい人 ◆ポイント ・筆者の技術職経験の長さを活かしたエンジニア向け実践的UX/UI活用法 ・「優れたデザインとは?」、「UXデザインとは?」といった問題を探く掘り下げ ・「業種別に考慮すべきUI」の指摘もあり、UX/UIを大局的に捉えたい方にもぴったり SFこそUX?大学生が専門家に聞いたUI/UX考 UXって結局何なんですか? 大学生が専門家に聞いてみた ◆こんな人におすすめ ・UXって何だ?何
こんにちは。デザイナーの武本です。 スマホサイトのヘッダーをデザインする時に気をつけているポイントをまとめてみました。 1. ヘッダーの縦幅 - だいたい44〜50pxが標準 ヘッダーには多くの場合、リンクが配置されます。その為、タップ可能な最小領域とされる「縦幅36px」は必ず取りましょう。有名サイトを幾つか見てみると、だいたい44〜50pxくらいが標準となるようです。 私は、48px or 大きめなら60pxにする事が多いです。60pxを超えるとちょっと邪魔に感じるかもしれません。ですが、ヘッダーの色をページ背景色と同じにする・あるいは透明にするなどすれば、70~80pxのヘッダーでも邪魔に感じなくなる事もあります。 2. 情報を入れすぎない - 2、3要素に絞る モバイル端末では、ヘッダー領域はかなり限られてしまいます。多くの要素をヘッダーに詰め込む事は、見た目によくないだけでなく、
AMP導入事例 AMPはAccelerated Mobile Pagesの略称で、モバイルWebサイトを高速表示するための技術です。サイトをAMP対応させることで、Google検索結果に「AMP」ラベルがつくため、高速表示できることがユーザーサイドからもあらかじめ認識することができます。 1.The Guardian https://www.theguardian.com/ イギリスの新聞大手「The Guardian」のWebサイトです。各記事がAMP対応しており、検索エンジンから高速で記事の表示が可能。気になった記事をすぐに閲覧することができて利便性は抜群。関連記事等のリンクをタップすると本サイト(theguardian.com)内の記事へと遷移します。 2.朝日新聞デジタル https://www.asahi.com 「The Guardian」同様に各記事がAMP対応。高速で記事表
こんにちは、アイスリーデザイン、プロジェクトマネージャーの間藤です。 先月のWP REST APIの検証とWordPressのテーマへの組込の記事の中で『次のステップとして「WP REST API x Monaca」でこのサイト(in-Pocket)のニュースアプリを作ってみようと思います。』ということを最後に書いていました。今回は、「何ができて」「どうやって作ったのか」説明したいと思います。 ちなみにまだ、このニュースアプリは公開していないので、Monacaデバッカー上のスクリーンショットでお見せします MonacaとWP REST APIを利用することで、簡単に自社メディアをアプリ化することができます。もし「自社メディアをアプリ化したい」と考えている方がいれば、 ぜひ参考にしていただけたらと思います。 目次 1. できたもの 1-1. 画面構成とのページ間の繋がり 1-2. 全ページの
「社内で自分の席にいる人が何人か把握できるようにしたいんだけど、定点Webカメラ使って何とかできない?」 何だか面白そう!先日新しくこんな仕事をいただいた、新米エンジニア小林です。 パッと思いついたのは 1.一定時間ごとにWebカメラで写真を撮影する 2.画像認識を使って、写真に写った、対象となっている人が自分の席にいるか判定する という単純な手法。しかし、 画像認識ってどうやってやるの?......うーん、とりあえずやってみるか! というわけで、「とりあえず画像認識してみたい」という人に向けて、簡単な画像認識の方法を、実際に今回の仕事で行った順序に沿って紹介します。 目的を明確化する 何を、どのように画像認識するのか? 実際に画像認識を始める前に、改めて手短に目的を明確化しておきます。 まずは、「何を」。 定点Webカメラからの撮影範囲内に自分の席を持つ3人を対象に、自分の席にいる人が何
こんにちは。デザイナーの武本です。 スマホアプリやスマホサイトだと、「このボタン、押せる!」と直感的にわかるデザインである事が重要です。では、どうすれば「押せる」ボタンになるでしょう?私がいつも注意している点を、アプリやデザインガイドラインを参照にしつつ紹介します。 1.ボタンのサイズ 一番スタンダードな、長方形のボタンを作る事を考えましょう。 何も考えずに作るとこんな感じ。 適当に描いた四角形の上に、「ボタン」と書いただけ。ボタンには見えませんね。 まずは最適な大きさを考えましょう。 横幅はbodyのwidthいっぱいにするとして、縦幅はどれくらい確保すればいいのか? いくつかアプリを見てみましょう。 Amazonのカートではボタン縦幅は47px、メルカリは44px、Money forwardのログイン画面は44pxです。 上記からもわかる通り、”ボタンの標準サイズは44px”とされてい
毎日のようにアップデートされるIT情報を逃さずキャッチアップするために、メディアを利用した情報収集は基本中の基本。 今回は、これからインフラエンジニアを目指す方、インフラエンジニア1-2年目の方におすすめの開発者ブログ・ニュースメディアを弊社のインフラエンジニアに聞きました!!日々、彼らが情報収集に利用しているイチオシの「読んで為になるブログ・ニュースメディア」を紹介します。 Amazon Web Services ブログ Amazon Web Services(AWS)が提供するア公式ブログです。AWSのアップデートなどタイムリーな情報を常に発信しています。 また、アップデート情報だけでなく、新たな機能の詳しい使用方法やさらに機能を使いやすくするためのカスタマイズについてなど“+α”な情報を載せてくれたり、AWSに関わる各メディアの情報をまとめて掲載してくれる点も嬉しいところです。 AW
こんにちは、広報横山いづみです!毎回、素敵な広報女子にスポットを当てている「女子レポ!」。今回は、広報担当でありながらプライベートでもガンガン情報発信している株式会社ウィルゲートの横塚まよさんをお迎えします。 実は...横塚さんは、企業広報以外にもこんな活動をしています。 ・AbemaTV FRESH! ゲーム実況 ・東京女子物語 運営 ・PLAY LIFE プランナー そんな情報発信が上手な彼女にアウトプットする時のコツや気をつけていることなどを聞いてきました!ぜひ、皆さんが何か発信される時の参考になれば 🙂 と思います。 初めて会った時に「東京女子物語」の名刺をもらってそのメディアとコンセプトに惹かれた横山。その後のやりとりで、彼女も「デザイナー⇒広報」というキャリアだったことが発覚!そこから仲良くなりました。 <プロフィール> 横塚まよさん 株式会社 ウィルゲート 広報 リーダー
(編集部にて一部加筆修正しております。最終更新:2024年6月5日) こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。 そこで重要なのが登録・入力フォーム。 登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。 1. 文字はできるだけ少なくする スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう...」となってしまいます。ユーザーに一度そう思われてしまうと、絶対といってもいいほどに、登
IT系の会社では当たり前になってきたソースコードのバージョン管理に用いられる「Git(ギット)」ならびに「GitHub(ギットハブ)」。ただ一旦、世の中にでると、そもそもソースコード管理って何?という会話は少なくない。 ソースコード管理とは、そもそも誰が何を変更したかの履歴を管理することによって変更によるトラブルが回避できたり、共同作業を可能にするものです。 そこで今回は、そんなソースコード管理の中でも一般的になっているGitについて解説します。Gitを使ったことないけど、使ってみたい!というデザイナー、ディレクター、新人エンジニア向けに、GitとGitHubの概要と違いについて解説します! Gitとは? 「Git」は、「ソースコードのバージョンを管理するツール」の名前。システム開発では複数の開発者によってソースコードが書き換わります。いつ誰がどこを変えたのか? 最新のバージョンはどれか?
新サービス開発に積極的な企業や人の魅力を、女子目線でお届け! 私、アイスリーデザイン広報担当の横山いづみが、女性社員の皆さまに直撃する当コーナー。 今回の女子レポは「初めて会社に広報担当を入れるときに、絶対にやったほうが良いこと」について、広報歴4ヶ月の柴田佳名子さんに広報歴が同じくらいの横山がインタビューしてきました! <柴田佳名子さんプロフィール> マーベリック株式会社 社長室広報ユニット リーダー インテリア系の会社の営業職を経て、なりたかったキャビンアテンダントを経験。もっとガンガン働きたい!という希望で、人生初めてのIT系の企業「マーベリック」に入社。マーベリック社はWeb広告の配信システムの運用と開発、ぐるなびや読売グループと協業した紙媒体の広告作成システムの開発を行う。 横山:柴田さんは広報歴が4ヶ月で、私と同じ位の広報歴ですよね。(それをきっかけに意気投合しました。)今まで
こんにちはi3DESIGN しばです。 先日(2016.04.26)の東京品川にて開催されたGoogle Developers Summit Tokyo 2016(以下「GDS」) に参加してきました。GDS自体は2日連続で開催されていて、今回は後半のProgressive Web Appsのテーマのセッションに参加してきました。GDSについては、他のブログでも技術的なTopicsについて諸々言及されているので、ここでは「ビジネスマンむけのGDS」という観点でレポートしたいと思います。 Progressive Web Appsのコンセプトは、よりいいユーザーエクスペリエンス Progressive Web Apps(以下「PWA」)のコンセプトをGoogleが公表したのは2015年になるのでもう1年近く立ちますが、当社の主力製品GOMOBILE flamingoを利用して、スマホサイトを鬼
海外アプリ必携シリーズの第2弾は、アフリカ。日本にはなかなか馴染みのない地域かもしれませんが、ヨーロッパにおいては人気のバカンススポットのひとつ。また近年はモバイル普及が急速に広まり、北アフリカをはじめケニア、ナイジェリア、ウガンダ、ガーナの五大都市では2002年と比較し300%以上の伸び率を記録しており、固定電話の普及というステップを越え、いまや10人中9人が個人のモバイルを所有しています。 今回は、そんなアフリカの人々のあいだで愛用されているスマホアプリをご紹介。アフリカでは圧倒的にサムスンなどのAndroid端末の普及率が高いせいか、現在GooglePlayでのみ配信されているアプリが多いという特徴も。 1. 宅配便版Uber!大人気の格安配達サービス 日本でもバイクメッセンジャーサービスはおなじみですが、「Wum drop」は配達員をアプリで手配できるサービスです。Uberの配達サ
スマホサイトをつくることに関わる事、4年目。 うっ。4年前とサイズや機能が全くちがう・・・ GoogleからMaterial designも発表され、トレンドがどんどん変わっています。 トレンドだけじゃなくて画面全体のサイズや機能もかわってきているので、過去の懐かしさもふりかえりながら、そしておさらいも含めた、最近のスマホサイトのサイズ感や機能で配慮したい10のあれこれを紹介したいと思います。 これからスマホサイト改善したいよー!なんてひとのお役に立てたら幸いです。 Attention! 通常の業務では、minサイズのiPhone 5にあわせてデザインを作成していますので、iPhone 5で検証しているっという前提で読んでくださいね! 【目次】 1.文字サイズ、行間 2.タップエリア 3.ヘッダ固定メニュー 4.マージン(余白) 5.リッチなスライドメニュー 6.横スライドのタブ 7.戻る
in-Pocket編集部が新サービス開発に取り組む様々な企業にお邪魔し、プロダクト誕生の裏側と成功のヒントに迫るこの企画。 オウンドメディア新参者のin-Pocketが今回訪れたのは、コンテンツマーケティングの雄・株式会社イノーバ。「イノーバ」は、フランス語で「イノベーション(革新)」の意味。そして、その革新の対象を「マーケティング」に定める同社。代表である宗像さんに、イノーバ誕生までの波乱万丈エピソードから未来のマーケティングビジョンまで、グイグイ掘り下げて伺いました。 株式会社イノーバ 代表取締役社長 宗像 淳さん マーケティング事業のルーツは実家の酒屋業? 事業方針を決定づけた、起業家との出会い ——今日は宜しくお願いします。コンテンツマーケティングで多彩な実績をお持ちのイノーバさんですが、御社が誕生するまでにどんな経緯があったんでしょうか? マーケティングの考え方は、「売れそうな商
TOP> イベント> 女子×テクノロジー 『FLOWERS BY NAKED〜日本一早いお花見新春女子会〜』に行ってきた! こんにちは。 毎日本当に寒いです。冬をすっ飛ばして、早く夏にならないかと毎日思っている横山です。 今日はこんな寒さをふっ飛ばしてくれる『FLOWERS BY NAKED〜日本一早いお花見新春女子会〜』を紹介します! 最近、話題になっている「新感覚!五感で楽しむ体験型庭園」と言われているプロジェクションマッピングのイベントです。 今日は広報横山いづみではなく!このイベントにぴったりな、みきちゃん(22)とさくらちゃん(22)の二人がこのイベントをレポートしてくれちゃいます! ドレスコードは「花」。美しすぎるリアルとヴァーチャルが融合したテクノロジーの世界をご覧ください。 (左)みきちゃん、(右)さくらちゃん 01 BIG BOOK(ビッグブック) 大きな本の形をしたBI
セミナーレポート「元ソフトバンクG最年少役員・芝氏が教える!どんな企業でもイノベーションを起こせる方法とは?」
次のページ
このページを最初にブックマークしてみませんか?
『DX内製化を支援するテック企業 | i3DESIGN アイスリーデザイン』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く