タグ

ブックマーク / dev.classmethod.jp (13)

  • Notion上で情報の再利用を行いたい場合に効果的なTableのRelationをやってみた | DevelopersIO

    Notionは、Markdownで書けることや、執筆した内容をWebページとしてそのまま公開できることが強みとして実感しやすいところです。 ですが、それ以外に使い込んでみないと分かりづらい機能も存在します。今回はそのうちのTable機能について書いてみることにします。 Table機能でお手軽レポート設計 左カラムから「+ Add a page」を選択してページを追加します。その後、「Press Enter to continue with…」にカーソルをあててクリック。/tableと入力して「Table - Inline」を選択します。 Untitledなテーブルが追加されました。Name、Tagと表示されている箇所をクリックしてタイトル、概略等に変更します。 概略はテキスト欄にしておきたいため、クリックして「Property Type」をMulti-selectからTextに変更します。

    Notion上で情報の再利用を行いたい場合に効果的なTableのRelationをやってみた | DevelopersIO
  • AIも使える高機能なスプレッドシートのサービス Rows をちょっと試してみる | DevelopersIO

    Rowsは、スプレッドシートを超えた次世代のデータ分析と自動化プラットフォームです。従来のスプレッドシートソフトウェアに比べて、より高度なデータ処理や分析機能を提供しています。 複数の箇所からデータを簡単に連携できるとの噂だったので、データ連携だけとりあえず使用してみようかなと思います。 Rowsの特徴 データベースやAPIとの統合 複数のデータベースや外部のAPI・サービスと直接連携することができます。リアルタイムでデータを取得し、分析や可視化を行うことが可能。 高度なチャート作成 ビジュアルダッシュボードの作成に特化したGUIも提供されており、洗練されたチャートやグラフを簡単に作成することができます コラボレーション 複数人同時編集・コメント追加等々,共同作業効率向上が期待できる AI分析 データセットから得られる重要な情報を要約する、データセットのトレンドとパターンを得る、スクリプト

    AIも使える高機能なスプレッドシートのサービス Rows をちょっと試してみる | DevelopersIO
  • デザイナー1年生のための教科書「アプリデザインドリルPDF」96ページ完全公開 | DevelopersIO

    今回、クラスメソッドのアプリデザインドリルを作成しましたので、みなさまに公開させていただきます。 メールアドレスなどの登録はなく、フリーでダウンロードいただけます。 以下のリンクからダウンロード可能です。 アプリデザインドリルver1.pdf ドリルは、参考書兼問題集として作成されています。まずは、出題される問題で現段階での理解を確認し、その上で解説を読んで理解して、再度問題を確認することで基礎知識を覚える構成になっています。 内容は、以下をまとめています。 クラスメソッドデザイナーが仕事を進める上で認識しておくと良いこと いろいろな方を見ていて、よくつまづいている部分についての説明 綺麗なレイアウトを作成することの技術的な面での記載はありません。レイアウトついては良サイトがたくさんありますので、あまりみない情報をお届けできればと思います。 ドリル目次 PART 1:UIデザイナーの役割

    デザイナー1年生のための教科書「アプリデザインドリルPDF」96ページ完全公開 | DevelopersIO
  • デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO

    Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。 レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。 Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能+知っていると便利になる機能を紹介しています。 この記事では次の点にご注意ください。 ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。 ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。(筆者はUSキーボードユーザーのため、JISでの確認はしていません)。 ブラウザ版の利用を想定しています。 Figmaアカウントは

    デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO
  • 【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO

    こんにちは。AWS事業部のKyoです。 簡単に静的サイトを構築・管理したいといった場合、Amplifyが選択肢の1つに上がってきます。 Amplifyと聞くと「ReactとかVue.jsとか必要なんでしょ?」そんなイメージをお持ちの方も多いのではないでしょうか。 今回紹介するAmplify Consoleはそれらの知識はナシに、従来CloudFront + S3構成で対応していた静的サイトをより簡単に構築・管理することができます。 また、ブログではホスティングに加えて、カスタムドメインの設定や開発環境の追加、Basic認証にも触れます。これらに関してはCloudFront + S3構成で実装するよりもはるかに簡単に設定することができます。 具体的なユースケースとしては、コーポレートサイトなどにハマるのではないかと思っています。 Amplify is 何? まず、言葉を整理しましょう。

    【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
  • 【Adobe Premiere Pro】音声をクリアに!エッセンシャルサウンドのラウドネス自動一致とクロマノイズ除去を使って音質改善をする | DevelopersIO

    やっほー!CX事業部のぺいちゅんです。 映像編集ソフトのAdobe Premiere Proを使って、音量調整と空調や屋外の音などのノイズ除去の方法をご紹介します。 自宅で音声収録は意外と難しい 動画コンテンツを制作する際に、自分の声を録音するケースがあると思いますが、自宅で録音をする場合、環境によっては空調や屋外の音が混ざるなどノイズが多く含まれていたり、なかなか大きい声を出すことが難しく、録音した音声の音量そのものが小さかったりと、意外と調整することが難しいと感じている方も多いのではないでしょうか? また格的なマイクなど、機材を整えることが難しく、スマートフォンなどに付属しているマイク付きのイヤホンを使って録音するという方もいると思います。今回はそういった環境でも一定のクオリティが保てるよう、Adobe Premiere Proのエッセンシャルサウンド(ラウドネス自動一致)とクロマ

    【Adobe Premiere Pro】音声をクリアに!エッセンシャルサウンドのラウドネス自動一致とクロマノイズ除去を使って音質改善をする | DevelopersIO
  • iPhone / iPad でデザインする人は必見!新機能「カスタムフォント」の使いかた | DevelopersIO

    iOS 13からカスタムフォントが利用可能に iOS 13およびiPadOS 13では カスタムフォント が利用可能になりました。 先日Adobe Creative Cloudアプリがカスタムフォントに対応しました。1,300種類のフォントが無料で使え、Create Cloudプラン加入者は17,000種類ものフォントが使えるようになっています。これらのカスタムフォントには日語のカスタムフォントも含まれているため、国内での利用用途もより広がっています。 iOS 13/iPadOSで無料のAdobeフォント1300種類が利用可能に - Engadget 日記事では、Adobe Creative Cloudで提供されているカスタムフォントを通して、カスタムフォントの利用方法について解説します。 カスタムフォントの基礎 カスタムフォントは、ざっくりまとめると以下のような機能です。 カス

    iPhone / iPad でデザインする人は必見!新機能「カスタムフォント」の使いかた | DevelopersIO
  • アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語(基本編) | DevelopersIO

    こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。 クリスマス?知らない子ですね……。 はじめに 私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも 覚えておくと周りとの認識の共有がスムーズになるかな?と思うことについて書いていきます。 用語集 ユーザーインターフェース(User Interface) 機器やシステムと利用者間で情報をやり取りするための仕組み。 ここではよくアプリやWEBの画面構成として使われている……ような気がします。 UX ユーザーエクスペリエンス(User Experience) ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を 動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。 後記の

    アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語(基本編) | DevelopersIO
    aoiasaba
    aoiasaba 2019/01/28
  • スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO

    新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ

    スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO
  • [Sketch3] カラーパレットを簡単に保存、読み込みできるプラグイン Sketch Palettes | DevelopersIO

    こんにちは、デザイナーのよこやまです。 最近アプリデザイン界隈で人気のある Sketch ですが、みなさんカラーパレット活用していますか? 当然のことながら、よく使う色を定義しておくと便利ですよね。 ただ、アプリの規模が大きくなってきて Sketch ファイルを分割するときや、複数人で作業したりするときに Sketch 自体にはカラーパレットを保存、読み込みする機能がないので少し不便だなあと感じていました。 色の定義がFixしているような場合には独自のテンプレートを作っておけばよいですが、動的に色定義が変わっていくようなフェーズには少しマッチしません。 そこで今回はカラーパレットを簡単に保存、読み込みできる Sketch3 のプラグインSketch Palettesをご紹介します。 インストール方法 何はともあれ、プラグインをインストールしましょう。 プラグインをインストールするには直接

    [Sketch3] カラーパレットを簡単に保存、読み込みできるプラグイン Sketch Palettes | DevelopersIO
  • 今日から使える文章校正テクニック | DevelopersIO

    渡辺です。 昨日のエントリーが結構反響大きめだったので、第二弾です。 文章校正をしていてよくあるパターンを幾つか抽出してみました。 ただし、前回紹介しているパターンは除外していますので、あわせて確認ください。 重複を減らす 文章校正の基礎は 重複を減らす ことです。 次の文章を見てみましょう。 AWSを使い慣れている人にとっては簡単な作業ですが、使い慣れていないと戸惑う所も多いところです。 この文章がくどく感じる理由は、「使い慣れている」が重複していることです。 前後関係もありますが「ところ」がなにを指しているのかも曖昧ですね。 後半の「使い慣れている」を削除し、バランスを取るために作業を後ろに移動しました。 さらに、前の文章を受けるため、「これは」を追加します。 これは、AWSを使い慣れている人にとっては簡単ですが、そうでないと戸惑う作業です。 スッキリしました。 しかし、「慣れていると

    今日から使える文章校正テクニック | DevelopersIO
  • CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO

    例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの

    CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
  • 楽しく作れる!スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO

    ワイヤーフレームを楽しく作ろう! 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる!」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました!もちろんすべて無料で始められます! では早速どうぞ〜! Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが物にかなり近い形で表現されています(むしろそのまま?)。UIパーツはWireframe、iPhoneiPadAndroidAndroid 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ

    楽しく作れる!スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 | DevelopersIO
  • 1