サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
bindup.jp
リッチな表現に!After Effectsを使った動くSVGアニメーションの作り方と実装方法|BiNDup こんにちは、デザイナーのオモトです。 私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第3弾です。 今回は、「Adobe After Effectsで作ったSVGアニメーションの作り方と、BiNDupに実装する方法」について解説します。 専門用語や工程数が多く、複数のアプリを経由する、だいぶ高度な使い方になるので、こういうこともできるんだなーぐらいに思っておいていただけると幸いです。 また複数のアプリを経由すると、編集データや素材がごちゃごちゃして、後で見返した時に大混乱が起きることが多いので、フォルダの整理方法を含め、丁寧に解説していきます。 設定できなかった方にはAdobe IllustratorとAfter Effects、BiNDu
新型コロナウィルス流行が公表されてから丸一年以上となり、オンラインミーティングもすっかり「板に付いてきた」方が多いのではないでしょうか。自宅で過ごしていると、カジュアルな服装やラフな髪型だったり、結局は家事や子供の世話でメイクまで手がまわらなかったり、会社に行くのとはあまりに外見が違いすぎる……。そんな中でも顔出しが必要なWeb会議をみなさんどういうふうに対応していますか? 今回は、バッチリ全身メイクして整えるまでもないけどちょっとキレイにできたらな、というニーズに合いそうな仕事で使うビジュアルフィルターを紹介します。 スマホアプリで一気に開花したバーチャルメイクアップ 最近、スマホアプリを中心に自撮りのビデオや写真を撮ると、自動的に面白い加工を加えてくれる機能がたくさんあります。 たとえば、Instagramのストーリーズで追加できるエフェクトや、ほかにも自撮りアプリならば、Beauty
リアルの出会いとオンラインとの出会いの比重、みなさんはどうですか? 多くの人がオンラインから仕事を受注発注するようになった現在、オンラインでのお客さん獲得方法にも目を配らなければなりません。 今回は、フリーランスのオンライン集客の場として注目される「note」について紹介してみます。 noteはブログとどこが違う? 突然ですがみなさん、noteをご存じですか? noteは、「クリエイターを応援するコンテンツプラットフォーム」として登場し、文章や漫画、写真、音声などを投稿し、より多くのユーザーに閲覧してもらえる仕組みもつまったユーザージェネレーテッドなブログ的なサービスです。 ソーシャルメディアで記事がシェアされていると、高確率でnoteで書かれている、と実感している人もいらっしゃるかもしれません。2014年にサービスを開始し、月間アクティブユーザー1000万人に達しました(2019年1月)
前回の記事では、デザインにおけるタイポグラフィについて、そもそもタイポグラフィって何?という部分から、その種類などの基本をご説明しました。今回からは2回に渡って、実際にWeb制作時に実践で使えるタイポグラフィデザインについて使い方や方法などを見ていきましょう。 →画像編集機能も付属のサイト作成ツール BiNDupを30日間無料体験 タイポグラフィデザインの使用例 タイポグラフィと難しく言ってはいますが、画像制作ツールでWeb用のバナーやパーツを作ったことがある方なら、実際にデザインに取り入れた経験があると思います。タイポグラフィは文字ですから、Webパーツには必須ですよね。Webで使用するとなると、ビルボードやバナーでのデザインに使うことが多くなってくると思います。 ビルボード メイン画像の上にショップ名とコピーを載せた例 バナー メディアの掲載情報へ誘導するバナー例 →画像編集機能も付属
Web制作者でなくとも最近は、「AMP」という言葉を耳にしたことがある人が増えているのでは? AMPページとはどんなものでしょうか? 自社のホームページもAMPは対応しなければ取り残される? BiNDupも今秋対応する、Googleでの検索表示にも有効なAMPについて仕組みや基礎から紹介します。 Google検索での上位表示・閲覧数増加に貢献するAMP AMP(アンプ)とは、Accelerated Mobile Pagesの略で、直訳すれば「加速させたモバイルページ」といった意味になります。AMP対応ページは、スマートフォンから見た時に、通常ページよりもより短時間で表示できるように設定されたWebページです。 私たちがスマホでGoogle検索結果を見た時に、AMPページの場合、一般のページよりも4倍近く高速で表示することが可能になると言われています。皆さんも稲妻のマークがついたサイトを検索
クリエイティブなアイデアを出し合ったり、内容を深く掘り下げたいとき、やはり顔を合わせてのミーティングは欠かせません。「他県にある取引先企業の担当者と打ち合わせをしたい」「出張先や外出先から仕事の進捗を会社に報告したい」。場所や時間の都合でなかなか対面でのミーティングは難しいことは多々ありますが、対面の良さはリアルタイムな意見交換と、必要があれば図や表を提示しながら、はたまた身振り手振りを加え、より緊密にコミュニケーションを図ることができること。 そこでもっと利用したいのが、インターネットの「ビデオチャットサービス」です。 ビデオチャットとは? ビデオチャットは、PCやスマホを使い、離れた場所にいるユーザー同士がテレビ電話のように顔を見ながら会話できるサービスです。複数人で会話できるサービスも多く、参加者が一箇所に集まるための移動時間やコストをかけることなく会議を開くことができます。以前はビ
Webサイトやバナー、印刷物のデザインや色を考える時にはどのようなプロセスで行いますか?アイディアが豊富で、なんとなく頭に思い浮かんだものをそのまま作ることができる人も、イメージをすぐ描ける人もいるかもしれません。でもそれは少し私にとってもハードルが高いです。何かを作ったり考えたりする前には、いろいろなものを見たり、読んだりして情報をインプットする環境作りを心掛けるようにしています。 物づくりを始める前に少し感性を磨いてみる 人は過去に観たものや聴いたものなどから、何かしらのインスピレーションを受けたりする生き物なのではないかと思っています。 それを知識として蓄積していき、自分なりの解釈で生まれてくるものが、自分なりのデザインや世界観なのかと。技術の取得も大切ですが、物づくりにはこうした感性を磨くことも大切な要素なのではないでしょうか? そこで今回は、個人的に楽しんだり参考にしたりしている
パソコン、タブレット、スマートフォン、時にはテレビ画面など、近年のWebサイト閲覧の手段は多様になり、最近は高解像度の機種も一般的になりました。 スマホ時代に最適な画像のサイズや新常識 上記の記事にもある通り、解像度の高い機種ではWebサイトの画像も大きなサイズで作成する必要があります。ただ、全ての機種に考慮したサイズを準備するのは大変ですし、どのサイズで作ればよいか迷うことも多いので、実際に制作する上での画像サイズの落としどころを探ってみたいと思います。 画面解像度の違いによる画像の見え方の違い 画像を大きいサイズで作る理由について、実際の見え方で確認してみましょう。 例えばiPhone8ではデバイスピクセル(画面の実際の解像度)2pxに対して、CSSピクセル(Webページなどを表示するためのサイズ)は1pxになります。 この2つの数値の比率はデバイスピクセル比と呼ばれ、Webサイトでは
クラウドストレージとは、インターネット上にファイル保存・共有できるように設計されたサービスです。オンラインストレージ、オンラインファイルサーバーなどと呼ばれることもあります。 リモートワークやテレワークが推奨される昨今、よりニーズが高まると言えるでしょう。 Webサイトを複数人で制作する際は、原稿や写真などの素材の受け渡しや、デザイン案チェックなどのやり取りが発生します。そんなときクラウドストレージなら、チームメンバーでいつでも同じフォルダにアクセスできるため重宝します。 無料で使えるサービスも多いので、結局どれが一番便利なの?と知りたい人のために、代表的な5つのクラウドストレージの機能と特徴をまとめて紹介します。まず最初にクラウドストレージそのものについて、まとめておきましょう。 目次 ・クラウドストレージはなぜ使うべきか? ・使い分けがオススメ!5大ストレージサービスを徹底比較 クラウ
毎年3月15日は前年度の所得税額を確定して申告する「確定申告」の締め切り日。 本ブログの読者にも、フリーランスで活躍するWebデザイナーやコーダーの方などがいらっしゃると思います。 申告書の作成方法や仕分けの方法はネットにもたくさん情報がありますが、微妙に判断がしづらいのが「このお金は経費にしていいかどうか?」問題です。 今回は、プロの税理士でフリーランスやひとり社長の経理の効率化に詳しい井ノ上陽一さん(EX-IT)にQ&A方式で経費の判断の仕方を詳しく伺いました! 経費のキホン フリーランス・自営業の確定申告では、「1年間の売上から必要経費を除いて、利益(課税所得)を算出する」収支内訳書(青色申告者は青色決算書)を作成する必要があります。この書類のほか、前もって納められている源泉税の金額や税控除や株式譲渡の損益などを書き込む「所得税の確定申告書」を作成して申告書として提出します。 収支内
登場時はコミュニケーションがメインの利用だったSNSも、いまではプロモーションやWeb集客に欠かせないインターネットツールの一つとなりました。TwitterやInstagramなどでも機能追加が行われ、単純につぶやくだけから、「できること」はめまぐるしい勢いで増えています。 ホームページを自分で運営していたり、Webの集客に関わっている場合、SNSに詳しくなくてもその機能や広告のシステムは知っておきたいもの。今回は、最近追加されたSNSの機能を調べました。かつ、比較的低予算からチャレンジできるSNSの広告は、スモールビジネスの方には要注目です。広告機能も参考にしてください。 目次 1.Instagram:いまだにユーザー数が成長し続ける人気SNS 2.Twitter:マーケティングにも使える機能に要注目 3.Facebook:Googleに次ぐネット広告のプラットフォーム 1.Instag
「Slack(スラック)」は、チャット形式でテキストや画像などを投稿・閲覧できる、ビジネス向けのオンラインコミュニケーションツールです。 PCのWebブラウザやデスクトップアプリ、スマホアプリなどがあり、デバイスを選ばず利用できるため、社内でも社外でも環境を気にせずやりとりができます。基本的な使い方はスマホのメッセージアプリとほぼ同じ。まだ使ったことがない人でもFacebookグループのメッセージや、LINEグループに近いと言えば想像が付くでしょう。 リモートワークの定番ビジネスチャット「Slack」のメリットは? なぜSlackの人気の理由は「チャット形式で気軽にやりとりができる」シンプルなインターフェースでしょう。グループ内のコメントを上から順番に読んで、随時返信するだけなので、細かい操作を覚える必要がありません。 リモートワークでも隣にいる感覚でレスポンスがいい 以前より、リモートワ
自社でサイトを運営されている方には、デザイナーやライターなどのクリエイティブ系のフリーランス、また、ショップオーナーやサロン経営など自営業、自由業で活躍されている方がかなり多いでしょう。 個人事業主の場合は、本業の片手間に、お金の管理や事務作業などすべて自分で行わなければならないことが多いですよね。そのため、積極的に省力化を心掛けなければ、毎日が雑務であっという間に終わってしまったり、繁忙期に業務がスタックしてしまいます。 今回は、ぜひ取り入れたいフリーランス・個人事業主の業務や雑務を簡易化する6種類のWebサービスを紹介します。 1.全自動 確定申告サービス 2.「請求書」をオンラインで 3.個人でもできるクレジットカード決済 4.iPadやiPhoneをPOSレジにする 5.名刺管理サービス 6.スキャンサービス 1.「確定申告書」作成を省力化する全自動確定申告サービス フリーランスに
Webサイトを作成したりブログを更新する際、いまや画像は必須。特に、SNSでシェアする際に画像サムネールがないとインパクトの低い投稿になってしまうので、シェア時に使う画像には力を入れたいもの。 時間や予算の制約もあり、すべて画像をオリジナルで作るわけにはいきませんので、便利なフォトストック(写真素材サイト)をいくつか知っておくと便利です。日本にも優れたフリー写真サイトがいくつかありますが、いつも同じサイトのものを使い回していると、どこかで目にしたような気もするし、読者も見飽きてしまいます。 今回は、会社や商品販売などのサイトでも使える商用利用OK、クオリティの高い写真がダウンロードできる海外無料写真サイトをピックアップしました。 特に海外ではCC0もしくはクリエイティブ・コモンズ・ゼロと呼ばれる、いかなる権利も保有しないためにダウンロードするユーザーが自由に写真を利用できるサイトが多いので
すでにデジタルステージIDをお持ちの方へ BiNDupをお使いの方は、BiNDupへログインしてお試しください。 それ以外の方はサイト作成後、ご自身のアカウントをBiNDupに新規登録してください。
Canva(キャンバ) は、Webブラウザやアプリを使って画像編集ができるアプリ。Canvaが生まれたのは2012年、オーストラリア発のスタートアップで、2017年現在1000万人のユーザーがいる人気サービスです。 今年7月にはKDDIウェブコミュニケーションズとの提携で、いよいよ日本語版がスタートしました。Instagramに投稿する写真に文字を入れたり、ブログのトップ画像を作ったりといったちょっとした画像編集が簡単にでき、おしゃれに仕上がるということで注目されています。 PCブラウザから使えるだけでなく、モバイルアプリも Canvaはクラウドサービスなので、アプリのインストールをすることなく、いきなりブラウザから使うことができます。サービスにログインするとテンプレートが多数用意されており、好きなテンプレートを選んで写真を変えたり文字を変更していくうちに、デザインがすばやく作成できると
スマホでのサイト閲覧が主流となってからシングルページは最近よく見かけるサイトの手法です。ページ遷移されにくく情報を一度に掴みやすいのがメリットです。 今回は実在する企業のシングルページの中からお手本になりそうなポイントをご紹介していきたいと思います。 シングルページとは? まず概念的な事ですが、一般的にシングルページは、 ・積み上げられた縦長ページ ・インパクトのあるビジュアル ・洗練された情報量 を含んだ1ページで完結したサイトのように見せるデザインであると云われています。 ページの優先度と階層をより明確化したサイト構成を持ったページとして私なりに解釈しています。 トップページに重要な情報を集約させ、他のページに遷移しなくても必要最低限を伝える事が出来ると云ったイメージです。 ページ遷移を抑えられるのでスマホで閲覧する際にも有利ですね。 シングルページが有用な理由 以下の様な理由が考えら
難しいHTMLやCSSなどは使わずに作れるのはもちろん、必要な項目の追加や例文の作成など面倒な作業はできるだけ省いて、もっと、もっと、ラクにホームページが作れたら……。 そんな願いを叶えるのが「AiDジェネレーター」です。最初に7つの質問に答えるだけで目的に合ったレイアウトのホームページを3サイト提案します。文章や写真もあらかじめ業種に合わせて提案されるので、少し手直しするだけでホームページが公開できる、という代物。でも、ここで疑問がでてきますよね。 そこで、【東京の美容院/お店を紹介するためのホームページ】とだけを想定して早速試してみました! サイトの自動生成を始めましょう。 AiDジェネレーターを起動 AiDジェネレーターはBiNDクラウドの新機能ですが、製品サイトから誰でもサイト作成をお試しいただけます。BiNDクラウドの「いますぐAiDで作ってみる」ボタンで、AiDジェネレーターを
「オウンドメディア」という言葉をよく耳にするようになりました。オウンドメディアとは通常のホームページとどう違うのでしょうか? フリーランスや個人商店などの小さな事業主でも役立つオウンドメディア運営ノウハウについてご紹介します。 自前の情報発信チャンネル「オウンドメディア」 オウンドメディアとは、企業や公的団体などが自前でWebのメディアサイトを持ち、読み物やコンテンツを発信するメディア(媒体)です。 テレビやラジオ、新聞などを「マスメディア」と言いますが、それに対して、マスコミなどの大きな通信網と配信利権を持っているところに一切頼らずに、自分たちのWebサイトで、いわば、「個人・企業専属のメディア」として運用しているのがオウンドメディアの一番のポイントといえます。 いま比較的、有名な企業のオウンドメディアは大ブームといえる状態で、これまでなかった切り口の面白いオウンドメディアが人気を集めて
動画共有サイトYouTubeをはじめ、FacebookやTikTok、Instagramに加え、今後はLINEにも動画共有機能(LINE VOOM)が追加される予定で、動画を配信可能なSNSプラットフォームが多数出揃った昨今。動画そのものも画質が年々ハイクオリティになっており、最適な動画サイズも年々変わってきています。 今回は、動画を作成してネット上に公開したりディスクに書き込みする際に知っておきたい、メディアごとの最適な動画サイズをまとめました。 →サイトの動画掲載も簡単にできる「BiNDup」を30日間無料体験 主な動画共有サービスの特徴を知ろう 横型動画プラットフォームと縦型動画プラットフォーム 動画といえばいまのところ通常は、テレビや映画のように横方向が長いサイズが一般的です。動画共有サイトのYouTube、Vimeo、ニコニコ動画、Facebookビデオ、また各種の動画コンテンツ
2024.02.08 Webサイトのフォントが理解できる!Webフォントとシステムフォントの違いとは?
レスポンシブWebデザインにリニューアルして、より多くの人が見やすいWebサイトに改善したいという人が増えています。そんな時、押さえておくべきポイントや現在のサイトの改善点など、ホームページのオーナーが、サイトリニューアルを始めるまえに考えておきたいことを紹介します。 成功するレスポンシブWebへのリニューアル方法 レスポンシブWebの大きな魅力のひとつは、PC、タブレット、スマートフォンなど様々なデバイスで見たとき最適な状態で閲覧できる点です。サイト幅に合わせてデザインがフレキシブルに変化します。ひとつのHTMLソースでPCとスマホを両方まかなえるというメリットがある一方で、どちらで表示された場合でも不都合のないバランスの良いWebを作らなければなりません。 今あるサイトをレスポンシブWebへリニューアルしたい場合、まずサイト設計やデザインに関する今までの常識や良し悪しに関する考え方を改
BiND8はお使い頂けましたでしょうか。 今回は旧バージョンのサイトをレスポンシブ化する際に気をつけるポイントを解説したいと思います。 BiND8よりソース構造を一から組み直しました。BiND1がリリースされたのは2007年ですが、8年の間にWebの技術や閲覧環境も大きく変化し、この変化に対応する為の抜本的な構造の見直しが行われています。
多くの企業がWebサイトのスマホ対応を進めています。「メディア定点調査2015」によるとスマホ所有率は69.2%、タブレット所有率は27.5%となっています(博報堂DYメディアパートナーズが2015年7月に発表)。2012年の同調査(スマホ31%、・タブレット11.6%)と比べるとスマホは2倍以上、タブレットも約3倍と、所有率は急激なペースで増え続けていることがわかります。 このブログの読者の方もほとんどがスマホをお持ちと思いますが、スマホで何か調べ物をしたとき、文字が小さくて見にくい、うまくタップできない、そもそも動的コンテンツで表示できない、そんな状態でガッカリした経験はありませんか? 本記事では、いまWebサイトのスマホ対応をいち早く始めるべき理由と見やすいスマホサイトの実例を紹介します。 Googleも推奨するモバイルフレンドリー モバイルフレンドリーとはスマートフォンの表示に最適
スマホで撮影した写真や動画のデータ。スマホで撮ったまんまになっていませんか? データサイズが大きいこともあり、スマホからパソコンに移動するのが面倒くさいと思ってしまいがちですが、大事なデータです。移行する方法は意外と簡単。用途に合わせて使い分けられるように、本記事では4つの方法を、手軽さ・速度・コストの3つの基準で比較してみました。 →テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験 ケーブル(有線) 最もシンプルで簡単な方法は、ケーブルでスマホとPCをつなぐ方法です。充電などに利用する付属のケーブルは、PCとスマホ間でデータの移動を行うことができます。 Androidスマホの場合は、内蔵ストレージまたはmicroSDカードにある「DCIM」フォルダーを参照することができます。PC上に保存用のフォルダーを作りコピーしましょう。 iPhone・iPadの場合は、ケーブル
スマホやタブレットの利用者が増えたことで動画の普及が急成長、大企業でなくてもネットでの宣伝方法として「動画」を活用する会社やお店が増えてきました。今回は、多くの人に見られる話題の動画、シェアされる動画をどうやったら作れるの? という疑問にお答えします。 いま企業では、「YouTube」、「Vine」、「Vimeo」などあらゆる動画投稿サイトを利用した「動画プロモーション」が活発に行われています。動画による宣伝は「企業」だけではなく「個人」でも行われています。なにせ、スマホ1つあれば動画が作れてしまう時代なのですから。 「動画」が注目されているのはなぜ? 「インターネット広告」の歴史は古く、1996年には既に画像やメールを使った広告がありました。もちろん今でも画像の広告も有用ですが、時代は動画にシフトしています。動画を使った宣伝で最も期待できる効果は、なんといっても文章や静止画では伝えきれな
2014年は「動画元年」と呼ばれ、多くのインターネット動画広告が注目を集めました。2014年の動画広告市場は、300億円規模を越え、<前年比約2倍>となったという調査結果もあります(※)。その背景には、スマホの普及、Wi-FiやLTEによる高速インターネット視聴環境の充実などがあると言われています。 ※サイバーエージェントとシード・プランニングによる市場動向調査より Web動画は、TVCMと比べてSNSなどで拡散されやすく、話題になると1000万回再生以上と大きな反響を呼ぶ動画も出てきています。 動画のメリットは、商品やサービスの理解を深めやすい、使っている様子を具体的にイメージさせやすい、操作方法が分かりやすく説明できる、などさまざま。また制作の裏側を描いたドキュメンタリー動画ならば、共感を呼びファンの獲得に繋がることも。このように訴求力が高いだけでなく、画像や文字に比べ視線を集めやすい
みなさまこんにちは。デザインチームのオカベです。 最近上司(コウ氏ではない)にオススメされて、シェアハウスに引越しました。 シェアハウスという今話題のおしゃれ感ばっちりの響きに、 私もいっそうますますオシャレボーイになりそうな勢いです。 早くも軽く不安を覚えていますが、宜しくお願いします。 さてみなさま、普段見出しの扱い方に何か基準を設けてますか? 目立たせたいから、本文よりちょっと太くしてみたり、大きくしてみたり・・・。 案外、何となくで決めているのではないでしょうか。 見出しは、記事の理解度を高める重要なアイテムなのはご存知かと思いますが、 実はサイト全体の見た目や雰囲気にも大きく関わってきます。 今回はそんな見出しと本文のフォントサイズの関係、ジャンプ率について紹介します。 ジャンプ率とは? 以前コウ氏が少し説明していましたが、「ジャンプ率」とは簡単にいうと、 本文のサイズに対するタ
Appleが満を持して発売するApple Watch。これまでもスマホと連携する腕時計型のアイテムは多数ありましたが、Apple Watchは特に注目を集めています。いったい、これまでのスマートウォッチとは何が違うのでしょうか? そして、Webサイト運営にどんな影響を与えるのでしょうか? Apple Watchとは? Apple Watchは、基本的に多くのセンサーを搭載した腕時計です。iPhoneと連携し、アプリを使って情報を表示したり、操作することができます。操作はタッチスクリーンと横に付いたデジタルクランから行ない、主に以下のような機能を扱えます。 通知機能 電話やメッセージ、カレンダーのリマインダーやニュースなどの通知を受け取れます。iPhoneの通知センターのような内容です。もちろん通知内容はスマホ同様に選択可能。 健康管理 Apple Watchは、搭載された心拍センサーなど各
次のページ
このページを最初にブックマークしてみませんか?
『ホームページ作成・制作サービスBiNDup』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く