サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
世界禁煙デー
note.com/smartcamp_design
こんにちは、スマートキャンプ デザイナーの柿澤です。 現在、新規サービスのローンチに向けてデザインをしているのですが、その際にOOUI(オブジェクト指向ユーザーインターフェース)を実践する機会がありました。 OOUIの概念自体は前から知っていたのですが、業務として使ったことはなく、実際に取り組んでみると本を読むだけでは理解することのできなかったこと、実践する中で躓いたことやその際の考え方などが勉強になったので、本記事ではそれらのことについて紹介していこうと思います。 そもそもOOUIとはOOUIとはユーザーの目当てとなるオブジェクト(もの、名詞)を中心にUIを設計することで、タスク(やること、動詞)をもとに設計するよりも使いやすく開発効率の高いUIを構築することができる設計手法になります。(ざっくりですみませんw) 今回の記事では手法論は割愛させていただきますので、ご興味ある方はぜひ専門書
スマートキャンプ デザインブログ デザイナーの髙松です。 「デザイン」と聞くと、グラフィックやUIなど、目に見えたり触れるものを想起されるのが一般的です。一方でデザインには、目に見えないものを設計する分野もあります。 そのひとつが「情報デザイン(情報設計)」です。 情報デザインとは、人々の手に届く情報をよりわかりやすく設計することです。情報デザインは、各分野のデザイナーはもちろん、全ての人の業務や伝え方の部分で役に立つ力です。 私自身は、情報デザイン力は文章を構造的に書くことで鍛えられると考えています。その演習方法として、文書記法である「マークダウン」を利用すると、情報の整理・構造化がしやすくなります。 本記事では、情報デザイン力を鍛える上でのマークダウンの利点や、私自身が意識していることを紹介します。 情報デザイン=あらゆる情報をわかりやすくすること情報デザインとは、『日常にある情報を整
スマートキャンプデザインブログ、葉栗です。 Figma内で何度も繰り返し使用する色、文字、部品はそれぞれFigmaのファイル上に登録しておくと、再利用ができてとても効率的です。しかし、その管理方法は人やチームによってバラバラで、何が一番使いやすいのかは分かりません。 そこで今回は、実際のプロダクトデザイン(SaaS)をしているFigmaファイルのスタイルとコンポーネントの管理方法の一部を公開します。 スタイルスタイルとは、Figmaの右側のパネルに表示される装飾系のものを管理するためのものです。 スタイルでは、大きく以下の4つのスタイルを管理できます Text Styleフォントの種類、大きさ、太さなどが定義できます。今回は以下のようにしています。 名前に「 / 」をつけることで階層化できることを利用して、まずTextとIconを分けています。 Textには、Heading1からCapti
スマートキャンプ デザインブログ デザイナーの大瀧です。 先日、マネーフォワードからスマートキャンプに出向し、覚えることも多く忙しい年明けを過ごしています。 出向にあたってデザインツールのFigma(フィグマ)を使用することなりましたが、私はほとんど触ったことがない初心者で、無料で学べる学習教材を色々と試してみました。 なので今回のブログでは、デザイナー大瀧が実際にFigma学習に使ってみて、おすすめしたい教材をまとめてみました。 FigmaとはFigmaの良さはいろいろとありますが、デザイナーではない人がビジネスコミュニケーションをしやすいのが特長です。これまでパワーポイントを使って作っていたデザインレイアウトや資料作成などにもFigmaは活用できます。 デザインツールとしての制作機能、そしてチームで作業や確認が可能な共有機能、完成イメージが具体化するプロトタイプ機能を搭載しつつ、フリー
スマートキャンプデザインブログ、haguriです。 先日、Figmaの料金プラン内で無料プランである『Starter』の内容が変わると発表がありました。 https://help.figma.com/hc/en-us/articles/360061769534 無料プラン(Starter)でFigmaを運用している方も多いと思うので、どのような変更があるのかを紹介します。 Figmaの料金プランFigmaには3つの料金プランが存在しています。 Starter 料金:無料 対象:個人、小規模プロジェクト向け Professional 料金:有料(月15$/エディター) 対象:中小企業/チーム向け Organization 料金:有料(月45$/エディター) 対象:大企業/チーム向け ※料金は月払いの場合です。年払いにすると変わります。 無料プラン(Starter)と有料プランの大きな違いは、
スマートキャンプ株式会社でデザイナーをしているhaguriです。 デザインの世界では「近接」「整列」「強弱」「反復」をあわせて、デザインの4大原則とよくいわれています。 4大原則が詳しく知りたい方は以下のサイトを見てください https://chot.design/concept-of-design/7c61bdcdc158/ 今回はFigmaでデザインするうえで、どのように整列していくのがいいのかを説明します。 Figma上で整える方法はいくつかあるのですが、主に「レイアウトグリッド(layout grid)」を使ってUIを整えることが多いと思います。 レイアウトグリッドでの整列方法としては、大きく分けて3種類の方法がありますので、それぞれ詳しく紹介します。 レイアウトグリッドとはフレーム内で、オブジェクトを整列させるための機能です。 (参考:Figmaのframeとgroupの違い)
スマートキャンプ デザインブログ、デザイナーの髙松(@dream_yt95)です。 今回はnoteのお題「#推薦図書 」に合わせて、先日読んだ本を紹介します。 紹介する本「今日からはじめる情報設計 - センスメイキングするための7ステップ」という本について書いていきます。 この本でなにがわかる?情報設計という言葉はUIデザインの文脈で使用されることが多いですが、情報を操って「見やすく」「捉えやすく」することはすべての人が行なっていることです。 デザイナーは「見やすく」「捉えやすく」することを業務として意識的に行います。無意識に行なっていたことを意識的に行おうとした途端に、再現できなくなってしまう経験は誰でもあるのではないでしょうか。 突然、自分の周りが混沌として見えてしまったとき、情報の整理をどこから始めていいのかわからないとき、混沌のきっかけを探したいとき、私はこの本をもう一度読み返すと
こんにちは。スマートキャンプデザインブログ、花岡です。 実は私、苦手なことや気が進まないタスクをあとに回しにしがちのタイプです。いつもはデザイン知識をかしこまって紹介しているスマートキャンプデザインブログですが、今日は少しだらしないパートでお送りします。 さて、「結局はやらなければいけないのに、後回しにしてしまうこと」ってありませんか。 「どうしたもんかな〜」っとそんなとき手にとったのが、 『「すぐやる人」と「やれない人」の習慣』 というビジネス書です。 「なんだか、ちょっと胡散臭いな〜」と思いながらとりあえず手にとって見ることにしました。 本には、自分を動かす「仕組み」があれば、意志の強さ弱さにはあまり関係ない。と記載あります。心理学に基づき行動を仕組み化して習慣にします。今回は、デザイナーあるあると合わせて、一部ご紹介したいと思います。 【思考編】仕組みで自分を動かすほうがラク スマキ
スマートキャンプデザインブログ、花岡です。 「資料作成ツールといえばPowerPoint」は今も根強く、多くの企業が利用していると思います。私もそう思っていましたが、デザインツール「Figma」と出会ってから、「Figmaは資料作成に向いているのでは?」と思いはじめました。 Figmaを使って、きれいかつ効率的に資料を作成する方法ををご紹介します。 Figmaで資料作成するメリット PowerPointに負けないぐらい、Figmaには資料作成に向いた機能がたくさんあります。そのFigmaで資料作成をするメリットは5つです。 ・全スライドのバランスをみて調整しやすい ・デザイン素材と連携しやすい ・使えるフォントの幅が広い(Google Fontsが標準で使える) ・オンラインで同時制作がスムーズにできる ・類似資料を別ファイルにしなくても良い 手順1:「フォント」と「色」を決めるテンプレー
Good & New とは Good & New(グッドアンドニュー)とは、3~6名程度のグループに分かれて、24時間以内にあった「良かったこと(Good)」や「新しい発見(New)」を全員で共有し、拍手をするという取り組みです。 組織やチームの活性化、アイスブレイクを目的に、アメリカの教育学者ピーター・クライン氏によって開発されました。 部署をまたいだ信頼関係づくりや、会社全体にポジティブな思考や雰囲気を生み出す効果があり、企業の朝礼に使われるケースが増えてきています。 Good & New という言い方以外にもいくつか呼び名があり、「Happy & New」などがあります。 Good & New のルール・手順ルール ・ランダムに選ばれた10名以下のグループで集まる ・ボールなどを手渡しして渡された人が話す ・基本的には24時間以内にあった「いいこと」や「発見」について話す (※土日な
スマートキャンプ デザインブログ デザイナーの髙松です。 今回は、社内でエンジニア向けの「Figma検定」というものを作ったので、なぜ作ったのか、どういう検定なのかについてお伝えします。 なぜ「Figma検定」を作ったのかスマートキャンプでのWebデザインの実装は、共同作業も含みますが、 ①デザイナーがFigmaでデザイン ②エンジニアがFigmaを見ながら実装していく という流れになっています。 いたって普通ではありますが、②で実装する人によってデザインがズレることがあり、 Aさんの場合:Figmaどおり、忠実にデザインデータを再現してくれている Bさんの場合:Figmaとズレがあり、”感覚”で再現してくれている ということが起きていることに気づきました。 さっそく、週の振り返りでこのような意見を出してみました。 エンジニア陣からは 「実は、あんまりよくわかってない」 「基本はできてると
スマートキャンプデザインブログ、モリシゲです。 私は普段からさまざまなデザイナーのブログを読んでいますが、「デザインはコミュニケーションだ」「基礎能力の中でも最も大事なのはコミュニケーション能力だ」という内容がたびたびテーマとして取り上げられています。 今回はそれらのデザインブログで言及されている「コミュニケーションのあれこれ」をかいつまんで、私のデザイン経験としても共感できる部分を中心にまとめてみました。 課題解決の上流工程では、「かんがえるデザイン」が必要「デザイン力」という能力を大きく2つに分けると、下流工程のスキルと、上流工程のスキルの2つに分かれます。 さらに細分化して観察力、分析力、発想力、表現力などに分けて話すこともできますが、今回は圧縮して説明します。 スタート地点は下流工程である「つくるデザイン」から まず新人のデザイナーは下流工程の業務を任されます。Webなら特定のペー
スマートキャンプデザインブログ、Designer / Engineer のhaguriです。 スマートキャンプでよく使用するデザインツールにFigma(フィグマ)というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。 Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。 今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキャンプの事例を紹介します。 Figma(フィグマ)とはブラウザ、もしくはアプリ上で共同でデザインワークができるツールです。 リアルタイムで共同編集できるのが特長で、SketchやAdobe XDなどのようなプロトタイピングツールの位置づけとなります。 なぜFigmaを導入したのかスマートキャンプではUIデザインをする際、2018年まではSketch、XD、Illustratorなど複数のツールを使って
ディスプレイ広告(バナー広告)とはディスプレイ広告とは、Webサイトやアプリ上に表示されている主にデジタル画像を使った広告です。バナー画像を使うため、バナー広告とも呼ばれます。 Webサイトでは右側やサイトコンテンツの中段や下部に配置されていることが多く、アプリでは画面下部に表示されるものが多くあります。 ユーザーにディスプレイ広告をクリックまたはタップさせ、広告主が設定しているWebページへ遷移させます。Webサイトへ遷移させる目的もありますが、サービスの認知拡大に使われるケースも多くあり、クリックさせるだけが目的でない場合もあります。 ディスプレイ広告の料金発生は2種類 ディスプレイ広告には大きく分けて2種類の料金体系があります。どちら料金体系でも基本的にはデポジット(すでに入金した金額)から差し引かれていく場合が多いため、予算オーバーをしにくい広告の一種です。 クリック単価制 ディス
スマートキャンプデザインブログ、モリシゲです。 緊急事態宣言から1ヶ月以上経ち、テレワークも板についてきた方も多いと思いますが、みなさんのデスクまわりはどのような環境になっていますか? 今回のデザインブログでは、スマートキャンプデザインチームのデスクまわりを一挙公開! 環境だけでなく、お気に入りのアイテムも合わせて紹介します。 01 ブルックリン調デスクでシックな雰囲気に デスクの所有者プロフィール 名前:モリシゲ デザイナー歴:約6年 デザインの専門領域:資料、図解、ロゴ、会社HPなど 1. 山田照明 Z-LIGHT LEDデスクライト 日差しが強いときや部屋が暗いときに、テレビ会議をすると顔が暗くなってしまう問題や、目が疲れそうだったので購入。電源ボタンが1つだけあるが、長押しで光量を調節できるシンプルなインターフェース。 スタンドライトにありがちな安っぽいプラスチックの感じがなく、ア
スマートキャンプ デザインブログ デザイナーの髙松です。 昨日、2020年4月7日、緊急事態宣言が発令され、新型コロナによる外出自粛は当分続きそうですね。スマートキャンプでは3月最終週より、「在宅勤務推奨」から「原則在宅勤務」に切り替えています。 多くの企業が長期間のリモートワークを見据える必要がでてきており、通常業務をオンラインに切り替えてしのぐのではなく、オンラインをもう一つの業務の主戦場と捉えて、新たな工夫を生む必要が出てきました。 今回は、私のチームで実施したオンライン振り返りのメリットを紹介します。末尾にFigmaデータも無料で配布しているので、ぜひご活用ください! Figmaでチーム振り返りをデジタル化私が所属しているBOXIL開発チームではスクラム開発(※1)を採用しており、ルーティーンの一環として、週次の振り返り会があります。振り返りの目的と手順は次の通りです。 ※1: ス
まだ開発中のサービスですが、このBiscuet(ビスケット)のデザインシステムの考え方を紹介していきます。 上記のランディングページ(LP)の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
スマートキャンプのハグリです。 弊社では、Biscuet(リリース後BALES CLOUDに名称変更)という新サービスの事前登録を6月5日(水)に開始しました! Biscuet(BALES CLOUD)とは? 営業活動を効率化する、インサイドセールスの最適化を実現するツールです。詳しくはLPをご覧ください。 本記事では、新規事業のLP作成時に考えていたことやプロセスを、Biscuet(BALES CLOUD)のデザインを担当している葉栗が紹介していきます。 LP作成の目的今回は新規事業のLPであるため、サービスの紹介と同時に市場のニーズを確かめる目的がありました。そのために、工数を最小限に早く作る必要がありました。 そこで、LP作成はコーディングをせず、STUDIOで作成することにしました。 STUDIOとは コードを書かずにマウス操作でWebサイトを作成できるサービス LPの作成プロセス
麻雀ができるようになるには覚えることがたくさんあり、非常に導入コストが高く難しいゲームです。本記事では麻雀をやったことがない初心者に向け、始め方などの基本的な手順、最低限覚えるべきルールや役を一覧で資料にまとめています。 麻雀初心者向け解説資料「麻雀の基本」 (クリックでページ送りできます) 麻雀をプレイするのに必要なのは3〜4人麻雀はひとりではできないゲームです。ひとりでやる場合はゲームアプリでコンピュータやネット対戦をする必要があります。 3人でプレイするものを「三人麻雀」、4人でプレイするものを「四人麻雀」といいますが、略して「三麻(さんま)」や「四麻(よんま)」などと呼びます。 通常プレイは四麻なので、麻雀しようと言われたら基本的には4人でプレイすることを指します。 麻雀の基本的な和了(アガリ)の形自分の手番以外のときは13牌を持っている状態となります。 自分の手番が回ってきたらま
スマートキャンプでは、Figma(フィグマ)というビジュアルコラボレーションツールを使用しています。 Figmaは素早く作れて、すぐにコラボレーションできるツールです。 その恩恵をさらに受けるために、効率化のためのショートカットキーリストを作りました!🎉 このショートカットキーリストを見ることでFigmaの使い方を学ぶことができるので、ぜひ使い始めの方も見てください。 自分用に作ったものだったので「Mac/USキーボード」基準です。 Windowsの方、JISキーボードの方は、キー配置の違いなどがありますのでご注意ください。 Figma ショートカットキーリスト PDF版ダウンロード(印刷などでご利用ください)
スマートキャンプデザインブログです。 2018年10月1日に新オープンした「AWS Loft Tokyo」に葉栗が行ってきました。 弊社(スマートキャンプ株式会社)では毎週水曜日が「リモートワークデー」となっています。 全社員対象の取り組みとなっていて、オフィスでも、家でも、カフェでも仕事をしてもいい日です。自分が最大限パフォーマンスを発揮できる状態を選択して仕事をすることができます。 そこで今回は働くのに最適な場所を求めて、AWS Loft Tokyoで仕事をしてきたのでその様子を紹介します。 「AWS Loft Tokyo」とはアマゾンウェブサービスジャパン株式会社が運営する「AWS を利用中のスタートアップおよびデベロッパーのための施設」です。 現在はサンフランシスコ、ニューヨークに常設のAWS Loftが稼働中で、常設拠点としては世界で3カ所目にできた施設となります。(アメリカ以外
スマートキャンプデザインブログです。 今回は2018年にリニューアルが相次いだハイブランドのロゴリニューアルについて、スマートキャンプインターンの八尋がまとめました。 ハイブランドのロゴリニューアルラッシュブランドのロゴというのは、そのブランドの個性や特徴を一番に表します。富裕層をターゲットとしているハイブランドにとって、高級感や豪華な印象を表すために重要な役割を担う存在と言えます。 また、今まで親しまれていたロゴを新しくすることは、ブランドイメージを新しくすることにつながります。 2018年にロゴをリニューアルしたハイブランドの新旧のロゴを比較して見たいと思います。 1. BALENCIAGA(バレンシアガ) Renewal / 2018春夏コレクション~ 20世紀前半のモード界において「クチュール界の建築家」とも評され、今も世界中で愛されているハイブランドとして有名なBALEN
こんにちは。デザイナーの高松です。 スマートキャンプのデザインブログも、今回で10週目になりました! 今週は2月14日が更新日ということで、表題のとおり、バレンタインにちなんだ記事を書いてみようと思います。 アプリで見かけるハートマークUI上で使用されるハートマークや吹き出しは、アプリの「いいね!」や「コメント」機能としてよく使われるだけに、重要でありながら目立ちすぎてはいけない、繊細な存在です。 各アプリのデザイナーさんが目立ちすぎないように設計しているからこそ、「このアプリのハートの特徴、覚えてる?」と聞かれたら、答えるのはなかなか難しいですよね。 今回はそのハートマークにスポットを当てて、役割や形、インタラクションに注目してみます。 1. Twitter 機能名:いいね / インタクラション:あり Twitterのハートマークは以前、スターだったことを覚えていますか?2015年にスタ
スマートキャンプデザインブログです。 2018年12月にクラウド資料作成代行サービス「SKET(スケット)」のサイトをクローズしました。本サービスはスマートキャンプ(以下弊社)の最初の事業で、創業の2014年から続けていました。 サイトクローズしたため、このSKETを運営していて、作っておいてよかったもの、これまでで得たこと、苦労したことを備忘録的にまとめています。 SKETはどんなサービスだったのか SKETは簡単にいえばスライド資料デザインのクラウドソーシングサービスです。インターネット上で不特定多数のデザイナーに案件の募集をかけ、クライアントとのマッチングを行います。その間を仲介したり、デザインの調整をするのが弊社の役割です。 クライアントは個人よりも企業が圧倒的多数でした。その理由としては個人に依頼するより企業(弊社)が間に入る方が、依頼時のさまざまなハードルが低いというところでし
スマートキャンプデザインブログです。 今回は『一生使える見やすい資料のデザイン入門』を書いた私(森重)が、パワーポイントデザイン(PowerPointやKeynoteなどの資料作成)で気をつけてほしいことをまとめます。 社内でも社外でもパワーポイントデザインを依頼されることが多々あるのですが、「あ、このパターンか……こうすればいいのにな……」と思うことがよくあります。 今回はパワーポイントデザインに長けていない方に向け、上の本と私の経験則に基づいて、チェック項目形式で解説していきたいと思います。 基本的にはパワーポイント(PowerPoint)上の話が多くなりますが、キーノート(Keynote)などでも共通のことが多いのでご安心ください。 注意書き このチェック項目で対応できる資料の種類 ・プレゼン資料(パワーポイント資料)などのスクリーン映写する資料 ・モニターなどで読むデジタル資料 ・
このページを最初にブックマークしてみませんか?
『スマートキャンプ デザインブログ|note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く