サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
贈る言葉
lab.sonicmoov.com
サイトマップと言えば、サイト全体を見渡せるという意味では人間にとってもクローラーにとっても便利なナビゲーション情報ですが、ほとんどのサイトではそれらを単なるテキストリンクでまとめているかと思います。 サイトマップのテキスト情報だけだと味気ないですが、VisualSitemapsを利用することで視覚化されたサイトマップを利用することができ、サイトの構成をさらに把握しやすくなるかもしれません。 目次 VisualSitemapsとは? VisualSitemapsの使い方 VisualSitemapsとは? VisualSitemapsは、指定したサイトのサイトマップ情報を視覚化してくれるオンラインサービスです。 指定したサイトの個々の画像がキャプチャされ、ツリー構造型のサイトマップを生成してくれるので、テキスト情報だけでは分かりづらいサイトなどではサイトの構成把握するのには便利なサービスです
Zoomにはウェビナーを開く機能がありますが、ウェビナーとは何かという解説と、Zoomウェビナーのやり方についてまとめてみました。 目次 ウェビナーとは? Zoomウェビナーの料金 参加可能人数 ウェビナーの登録 パネリストと視聴者の招待 ウェビナーの開始 ウェビナーなどのイベント予約管理ツール ウェビナーとは? ウェビナーとは、ウェブとセミナーを組み合わせた造語の事を言います。オンラインセミナーやWebセミナー、オンラインイベントなど、Webカメラなどを使ってインターネット上で行うセミナーの事を指します。 PC付属のWebカメラやスマホなどを使ってビデオ通話が手軽にできるようになったり、Zoomなどのツールを使うことで簡単に開催できるようになっていますので、Webセミナー、オンラインセミナー、オンラインイベントなどを開催したい人はチェックしてみるといいでしょう。 Zoomウェビナーの料金
デザイナーで悩むことの一つに配色があるかと思いますが、そんな時に便利なのがカラーパレットです。そんなわけで役に立つものからAIが提示してくれるものまで、様々なものを集めてみました。 目次 スペースバーでランダムに探す Coolors AIでカラーパレット生成 Khroma かわいいパステル調を探すなら Color Hunt Googleのツール Color Tool / Material Design マテリアルなカラーパレットMaterial UI Colors 2色の組み合わせを簡単に確認できる Material Palette ジェネレートカラーパレット ColorSpace カラーパレットの作成・分析・編集ができる Palettte App Adobeのカラーパレット Adobe Color CC サイトの色を抽出する拡張機能 Site Palette ブランドカラーを探せる Br
DockerでWordpressが簡単に構築できるということでMacでやってみたらわりとスムーズにできたのですが、Windowsで構築してみようと思ったらわりとつまずいたので細かく手順をまとめてみたした。 関連 【Docker入門】コンテナ型仮想化技術Dockerを使ってみた 目次 Windowsシステム要件 Windowsインストール時の問題 Hyper-VとContainerの有効化 BIOSでVirtualization Technologyを有効化 Dockerのユーザー登録 Docekrのインストール できない場合 Windowsシステム要件 システム要件は公式のページに記載してあります。 https://docs.docker.com/docker-for-windows/install/ Windows 10 64-bit: Pro, Enterprise, 又は Educa
様々なサービスでAIが導入されている今日此頃ですが、Webにも期待感を持たせてくれるようなFrontyのサービスが登場しました。 目次 Frontyとは? Frontyの使い方 Frontyとは? Frontyは、Webページのデザイン画像をアップロードするだけでAIが画像をHTMLにコンバートしてくれるWebサービスです。 複雑なレイアウトのコーディングはできませんが、ガイドラインに沿ってデザインをしておくだけで、たったの数分で簡単にHTMLコーディングしてくれる魅力はあります。もちろん、画像からコーディングした場合でもブラウザ上で簡単に修正ができるようになっています。 無料の場合には、Frontyのサブドメインに公開されますが、有料プランの場合には独自ドメインの利用もできるようになっています。 Frontyの使い方 さくっと使い方を紹介したいと思いますが、AIがコーディングしてくれるも
これまでにもCSSに関する様々なエフェクトを紹介しましたが、今回はマウスオーバー時のアニメーションに関する良さげなものをピックアップしてみました。 関連 使える!CSSアニメーション 20選 目次 様々なボタン用ホバーエフェクトHover.css スライドするButton Hover Effects グラデーションなAnimated Gradient Buttons 様々な画像用ホバーアニメーションCSS Image Hover Effects 画像ホバーでタイトルと文章表示Simple Tile Hover Effect 画像のマウスオーバーをオシャレに見せるHover Effect Ideas 不思議なホバーエフェクトImage hover effect カーソルを追従3D hover plane effect テキストをスタイリッシュに見せる 10 stylish hover eff
Adobe XDがアップデートされてどんどん使いやすくなっていますが、XDを使っているとどのように書こうかと少し迷うのが仕様書・指示書の書き方です。社内だけで共有するなら、アートボード外にでも仕様を書き込めばいいのですが、ブラウザ上で仕様をクライアントにも共有する場合にはこの方法だと機能しません。 そんなわけで、XDの仕様の書き方についていくつかの方法についてのメリット・デメリットについてまとめてみました。 関連:Adobe XDのキートリガーでプレビュー画面の移動を爆速にする方法 目次 アートボード外に書く アートボードを拡張する マスターコンポーネントを利用する Web上のコメント機能を利用する オーバーレイを使う アートボード外に書く 一番思いつくのは、このアートボード外に仕様や指示を書き込むことでしょう。 メリット 手軽に書き込める 社内で共有しやすい デメリット ブラウザで共有し
以前にAdobe XD用のUI Kitをまとめましたが、今回は管理画面やダッシュボードに使えそうなテンプレートをまとめてみました。 関連:無料で利用できるAdobe XD UIKit 15選 目次 充実したFREE Dashboard UI Kit for Adobe XD 120以上のUI要素があるMiro FREE Dashboard UI Kit for XD 3種類のサンプルがあるDashboards アニメーションに凝ったAdobe XD Interactions with Auto Animate ライトとダークテーマがあるダッシュボードテンプレート 丸みを帯びたCourses Dashboard アナリティクスの管理画面をリデザインFree UI Kit Google Analytics Redesign ファイナンスとインフルエンサー用管理画面Finance / Influ
最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連:使える!CSSアニメーション 20選 目次 ちょっとクール CSS loading animation 12 ゲームで見かける Rotate / Pulse Loading Animation ヘキサゴンアニメーション overwatch loading by css3 CSSのみ Cube Flipping Loader クラウドスパイラル Cloudy Spiral CSS animation 心地よい動き Hexagonal Loading Ani
2018年12月頃にWebサービス「remove.bg」が、画像をアップロードするだけで簡単に人物写真などの背景を自動で切り抜いてくれる画期的なサービスとして注目を浴びましたが、それがPhotoshopの拡張機能としても使えるようになっています。 使い方をざっくりと紹介します。 関連:えっ、これだけ?Photoshopの切り抜きが爆速になる「選択とマスク」機能 目次 Remove.bgの使い方 拡張機能Remove.bgのインストール Remove.bgにサインアップ APIキーの取得 PhotoshopでAPIキーの入力 Photoshopで背景を自動切り抜き アンインストール Remove.bgの使い方 拡張機能Remove.bgのインストール まずは、下記のURLにアクセスして拡張機能をインストールします。 Remove.bg for Adobe Photoshop https://
Androidキオスク端末化の背景 Android端末で特定のアプリ以外は一切使えないように制限したい、という場合、自作のアプリであれば、下記の記事のような作り方で実現できますが、 Kioskアプリと端末の作り方 ~DroidKaigi2018発表内容の要約+α~ ソースコードのいじれないGoogle Play Storeで公開されているアプリの場合、上記では対応できないため工夫が必要です。 そこで今回は、3rd Partyアプリでキオスク端末化する方法を紹介します。 概要としては、独自ホームアプリから特定のアプリ以外は起動できないようにします。 また、端末の設定変更もできないようにします。 キオスク端末とは? 特定の機能に絞り込んだ情報端末機器のことで、コンビニのチケット発券機や、家電量販店の写真プリント機、回転寿司屋さんなどのタッチパネルなど操作できるものもあれば、単に情報を流すだけの
画像ギャラリーを見せる手法として使われるスライドショーですが、CSSのみを使ったものやjQueryなどを使ったものなどが色々とありますが、面白そうなものを集めてみました。 関連:イケてるローディング・アニメーション25選 一味違うスライダー Canvas image slider 初見で「おっ!?」と思わせてくれることは間違いないでしょう。 エフェクトがクール WebGL Distortion Slider これはかっこいいスライダーですね。 マスクを使ったスライダー Image Slider with Masking Effect マスクを使ったCSSスライダーで、動きがシャープ&シンプルです。 サムネイル付き Gliding Gallery | Simple Image Slider Transitions 至り尽くせりなスライダーではないでしょうか。サムネイルがあるので視覚的にもユー
CSSファイルの読み込み ローカルで読み込む 下記リンク先からCSSファイルを保存して、ファイル名を「animate.min.css」と保存します。 https://raw.github.com/daneden/animate.css/master/animate.css ローカルで読み込む場合は下記のように記述します。 [sourcecode lang="html"] <head> <link rel="stylesheet" href="animate.min.css"> </head> [/sourcecode]
UI・UXデザインに欠かせないAdobe XD。そんなAdobe XDには予めAppleのiOSやGoogleのAndroid向けのUI Kitをダウンロードして利用できるようになっていますが、Web上には無料で配布されているUI Kitもあります。 そんなわけで、良さそうなAdobe XD用のUI Kitをピックアップしてみました。 関連 Adobe XDの共有機能を200%使い倒す方法 凝ったデザインSocial Meet Up UI Kit FREE https://www.behance.net/gallery/72907227/Meetio-UI-Kit 少し変わったサンプルデザイン、そして80以上の画面デザインがあり、しかもプレビュー時の画面の動きがけっこう凝った作りになっており、Adobe XDでここまでできるのかと思わせてくれます。 「Download .xd file」の
HTML5、特にCSS3では、色々と便利なプロパティ機能が追加されていてコーディングがだいぶ楽になった部分もあるかと思いますが、それでもブラウザによっては使えない場合もあるかと思います。 そんな時に役に立つのが、そのプロパティのブラウザ対応状況を簡単にチェックできるサービス「Can I use」です。 https://caniuse.com/ 目次 Can I useの使い方 Analytics連携でさらに便利に 終わりに Can I useの使い方 サイトにアクセスすると下記のようなメッセージが表示されますので、「Import」を選びましょう。これは、例えばFlexboxの対応状況の検索結果画面に、日本でのサポート状況もデータとして表示してくれますので、インポートしておくと便利です。 Detected your country as “Japan”. Would you like to
Chromeのブラウザにはデベロッパーツールというのがありますが、それを利用することでWebページのHTMLやCSSを書き換えて素早くコーディングをしたり、動作検証をすることができます。コーディングに使えるのはもちろんですが、うまく使えばデザインをあれこれと試行錯誤することもできます。 このデベロッパーツールに似たChrome拡張機能用デザインツールにVisBugというのがあります。 VisBugとは? VisBugは、オープンソースによるChrome拡張機能用のデザインツールです。 下記のような主な特徴があります。 Webページの要素などをクリックすると、様々な情報を表示 アートボードのようにページを編集したり、スタイルを変更できる ホバースタイルやアクセシビリティの確認、要素配置の変更も可能 レイアウトとコンテントは、様々なデバイスサイズに対応 AdobeとSketchのスキルを活用
以前にUI/UXデザイン制作の参考に!見てるだけでも楽しいアプリデザインのギャラリーサイト9選という記事でアプリに関連するUI UXの参考サイトを紹介しましたが、今回も個別に紹介したいと思います。 目次 Collect UI UI UXデザインサンプル Collect UI Collect UIは、Ahmet Sülek氏によるサイトで、Web及びアプリの様々なデザインやイラスト、およびUI / UXをパーツ別にコレクトしたギャラリーサイトです。 ざっとですが、こんなパーツデザインがまとめられています。 サインアップ チェックアウト ランディングページ 計算機 アプリアイコン ユーザープロフィール 設定 404ページ ミュージックプレイヤー SNS共有 カウントうダウンタイマー オン・オフスイッチ 検索パーツ http://collectui.com/ UI UXデザインサンプル いくつか
CSSを使ったアコーディオンと言ってもシンプルなものもあれば、ちょっとした動きを取り入れることでまったくもって違ったものになり、表現力が増します。そんなわけで今回はCSSアコーディオンで表現力をあげるためのサンプルをまとめてみました。 ファンキーなFunky Pure CSS Accordion アニメーションがファンキーなアコーディオンです。この画面で見づらい場合はリンク先にアクセスしてみてください。 多段構造によるMulti-level Accordion 多段構造によるアコーディオンメニューです。 動きがオシャレCSS + HTML only Accordion Element シンプルですが、全体的に動きがオシャレな印象を受けます。 シンプル&安定なAccordion Menu 左サイドにアイコン、右サイドには開閉のための矢印でナビゲーションしているシンプル&安定のアコーディオンで
デザインしている時にフォントの元データがない状態で、それに似たフォントを使ってデザインをせざるを得ない時や、偶然見つけたフォントに似たフォントを使いたい場合に役立ちそうなツールを紹介します。 関連:世界のブランドロゴのフォントが簡単に探せるFont In Logo 目次 Adobe Capture CC What Font Is Identifont Adobe Capture CC 最近、何かと話題のAdobeさんがiPhone、Androidアプリとして提供しているアプリの1つにAdobe Capture CCというのがあります。 これは、デザイナーの心をくすぐるような機能がいくつあり、その中の1つにフォントをカメラで撮影した写真などから文字を認識して、それと同じフォント、または似たようなフォントをピックアップしてくれる機能があります。 それにより、同じようなフォントを使うこともできま
ブログやメールなど業務で文字入力をしているとメールアドレスや住所、メールの署名など決まりきった定型文を入力することが多々あるかと思いますが、その場合に文字入力を支援してくれるスニペットツールを使うと文字入力が格段に向上します。 関連 Windowsで複数のファイル名を一括変更できるPowerRename スニペットとは? スニペットは英語のsnippetで「切れ端、断片」という意味を持ちますが、IT業界においてはHTMLやJavaScript、PHPなどマークアップやプログラムを書いていると同じようなコードを繰り返し書くことが多々あり、それらを再利用できるように登録を行い、簡単な入力で呼び出すことをいい、文字入力の効率を格段に向上させることができます。 簡単に言うと「定型文を呼び出す」と捉えると分かりやすいかと思います。 プログラムを書くためのエディタには標準機能として備わっているものも多
Slackではボットを追加することで、様々な機能が使えるようになりますが、機能として使いたいものの1つにアンケート投票機能があります。投票機能を持ったボットの中でもわりと目に入ってくるのがPollyです。今回はこのPollyについての使い方を紹介したいと思います。 Pollyのインストール 下記ページにアクセスしてSlackのアカウントでサインインします。 https://slack.com/apps/A04E6JX41-polly そしたら、インストールをポチッとクリック。 アクセス許可を求められますので、許可を出します。これで準備は完了です。 基本的な使い方 投票アンケートの作成 簡単な使い方を見てみましょう。 「投票」項目を作成するには、チャンネルの投稿画面で下記のように記述します。 /polly 投票アンケートタイトル 「/polly」と記述した後にスペースを空け、投票アンケートの
iPhoneやAndroidなどの端末画像にPhotoshopでデザインしたスマホの画面やキャプチャ画面をはめ込んでデザインに活かせるモックアップですが、ネット上で検索すれば無料でPSDデータとして探すことができます。 ただ、Photoshopを持っていない人にはそれは使えないものだったり、Photoshopの知識がないと使えなかったりします。そこでもっと手軽に使えるshotsnapの紹介です。 関連記事 便利すぎ!Android、Surface等のあらゆるモックアップがあるFacebook Design Devices iPhoneだけじゃない!様々な素材がモックアップとして使えるMockupWorld shotsnapとは? shotsnapは、Gaddafi Rusli氏によるオンラインで無料で利用できるモックアップ作成サービスです。 iPhone(SE、8、X)やGalaxy S8
フロントエンドエンジニアのまめ太です。 僕の自作デスクトップアプリの一つに、起動履歴をGoogleスプレッドシートに送信し、記録しているアプリがあります。このシートでは、毎月1日に、いつの記録かをファイル名に含めてシートを別名保存したのち、コピー元のシートをクリアして新たにデータを記録できるようにしています。 この作業は、GoogleスプレッドシートとGoogleドライブ上で手動で行っているので、やっぱり面倒です。 というわけで、「一定期間おきに特定のスプレッドシートのコピーを取ってGoogle Drive上のフォルダに別名保存し、コピー元のスプレッドシートの内容をクリアする」という作業を自動化してみました。 利用した技術と構成 今回は、AWSのLambda関数として用意したNode.jsのスクリプトをCloudWatchのスケジュールトリガーで定期実行する形で自動化を行いました。 Lam
CSSフレームワークと言えばBootstrapが有名だと思いますが、今回は【軽量】なものに少しフォーカスして探してみました。言うまでもありませんが、軽量なデータはユーザーがページへのアクセスした時のストレスを軽減してくれるメリットがあります。 こちらのランディングページ用テンプレートもチェックしてみてください。 【無料】高品質でおしゃれなランディングページテンプレート10選! FlexboxがベースのSPECTRE https://picturepan2.github.io/spectre/ GZIP圧縮で10KBという軽量なCSSフレームワークです。レスポンシブでFlexboxをベースに組み込まれています。 GZIP圧縮で6KBのMustard-UI https://mustard-ui.com/ これもGZIP圧縮で6KBの超軽量なCSSフレームワークです。オープンソースで作成されてい
新入りフロントエンドエンジニアのまめ太です。 静的サイトジェネレーター群雄割拠の時代、ホスティングサービスにも選択肢がたくさんあります。今回は、静的サイトでCMSが使えるようになるNetlify CMSと連携するNetlifyを使って、静的サイトを作ってみます。 Netlifyとは? Netlifyは、GitHubやGitLabのリポジトリを静的サイトとして公開してくれるホスティングサービスの一つです。HTTP/2に対応し、独自ドメインやSSLなどが無料で使えて高機能ですが、一番注目すべき機能は、リポジトリに新たなプッシュがあると、webhookを受け取り、自動で更新されたサイトをビルド、デプロイしてくれる機能です。ローカルでビルドしたり、他のCIサービスを探したりする必要はありません。 https://www.netlify.com/ Netlify CMSとは? Netlify CMS
動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。
世界的に見てもクリエイティブワークにもっとも利用されているデザインツールは間違いなくPhotoshopでしょうが、スマートフォンの登場と共に、スマートフォンのUIデザインに特化したSketchも登場し、着々と人気を獲得しています。Sketchはバージョン49ではさらにプロトタイピング機能を実装して機能を強化しています。 ここに来てさらに新たな野心的なデザインツールInVision Studioが登場しようとしています。 InVision Studioとは? InVisionを聞いたことがある人がいるかも知れませんが、InVisionは、アプリやWebページのプロトタイピングを利用できるコラボレーションWebサービスで、2011年の開始以来300万ユーザーが利用しており、ツイッターやNETFLIX、airbnb、salesforceなどの大企業も名を連ねる人気のサービスでもあります。 そのI
デザインと聞くとグラフィックや装飾を思い浮かべがちですが、designの意味には「設計する」という意味があります。「画面を見るユーザーに分かりやすく情報を伝達するために視覚設計する」、と捉えるとよりよいデザインができるようになるのではないでしょうか。 「分かりやすく情報を伝達する」デザイン手法の一つとしてインフォグラフィックがあります。 インフォグラフィックとは? インフォグラフィックとは、”information”と”graphics”を組み合わせたもので、グラフィックを使って情報を視覚的に分かりやすく表現したデザイン手法です。 情報を視覚化してみせることでユーザーの認知を向上させることができ、特にインフォグラフィックと相性のいいものに、データや統計的な数値情報を使ったものがあります。こちらのページデータで見るソニックムーブでは弊社に関する数値をグラフィックで表現しており、視覚的に分かり
前回の記事脱パワポ!Adobe XDでアプリのワイヤーフレーム作成のすすめでAdobe XDでワイヤーフレームの作成方法を見てきましたが、今回はAdobe XDの共有機能を見ていきたいと思います。 Adobe XDではプロトタイプとデザインスペックの2つの共有機能があり、それぞれの主な用途の違いは下記のようになっていますが、今回はプロトタイプの共有機能を見ていきたいと思います。 プロトタイプ 画面遷移の確認、コメント機能など デザインスペック マージンやカラー情報など Adobe XDの共有機能のいいところ 個人的に感じた良いところです。 画面単位で共有できる これもパワーポイントでワイヤーフレームや画面遷移図などを作った場合と比べてしまいますが、パワーポイントの場合、ファイルを修正したらそのファイルごとを共有することになりますが、どこを修正したのかを探すのが大変だったりします。 Adob
次のページ
このページを最初にブックマークしてみませんか?
『SONICMOOV LAB ( ソニックムーブ ラボ )』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く