なぜこの店が評価2.0？！クチコミや評価に左右されない！小さな飲食店がWebサイトを持つ必要性について考えてみた。
当社では昨年あたりから、飲食店様のWebサイト制作についてご相談を受けたり、実際に制作したりする機会が増えてきました。 色々とお話しを伺っていくと、制作費用面やグルメサイト(クーポンサイト)掲載やクチコミサイトでの評価のお話しなど、インターネットでのお店のPRを巡って色々とご検討されているオーナー様が増えていることを実感しました。 中でもグルメサイトへ掲載するかWebサイトを作るか、迷いに迷って結局グルメサイトに掲載される方、せっかくWebサイトを作ったけど運用しきれなくて閉 […]
小さなWeb制作会社がつくったBtoB Webサービスで課金が発生するまでにやった8つのこと。
当社では創業からいくつものWebサービスをリリースしては閉鎖して、ということを繰り返してきました。そんな中で、最近ではBtoBサービス、企業の日常業務で使えるWebサービスに力を入れています。 収益モデルはBtoBサービスですので、広告収入ではなくユーザー課金がメインです。 ありがたいことに、ここ最近でやっと課金してご利用いただけるユーザー様が出てきました。 この記事で紹介するサービスは、具体的にいうと「Grmo(グルモ)」というグループウェアです。 (サービス紹介の記事では […]
インスタ写真で集客力アップ！「飲食店×Instagram」Webサイト制作サービスを始めました。
インスタ映えという言葉が2017年の流行語大賞にノミネートされました。 個人的には昔のInstagramは写真加工の格好良いフィルターが付いていて、加工したおしゃれ画像を投稿するというサービスで、フィルター機能の面に注目していました。 それが今や様々な使い方やPRに使われるようになってきています。 特に飲食関係が目立ちます。 私もInstagramを使っていますが、食べ物の写真をアップする方はかなり多いです。 フィルター効果もあってかなかなか良い写真がたくさんアップされていま […]
Web制作の作業範囲を巡るトラブルの原因は、制作会社の曖昧な見積りにもあるのではないか。
Web制作を進めていく中で、お客さまと制作会社の認識の違いで、作業範囲や修正回数を巡ってトラブルが発生することがあります。 当社でも恥ずかしながら、お客さまに説明が不足していたり、ご理解いただいていたものと解釈して制作を進めてしまい、トラブルとまではいかないにしても軽く揉めることは多々あります。 品質や進捗遅延のクレームに関しては制作側の責任ですが、仕様変更や追加作業の範囲をめぐる揉め事についてはお互いの主張する部分もあるので、なかなか難しい問題です。下手をするとお互いの主張 […]
デザイナーはアーティスト(芸術家)ではないという話。
最近、Web制作のご相談を受けていて、お客さまから「デザイナーな芸術家じゃないんだかさ！」というお話を伺うことが続いて何度かありました。 話のきっかけは、あるお店の名刺やロゴデザインをデザイナーにお願いした際に、早く名刺と店の看板用にロゴが欲しかったのに、なかなか納品してくれなかったという話でした。 詳しく理由を伺ってみると、作業自体が間に合っていなかったのではなく、デザイナーがロゴにいまいち納得いかないから納品できない、ということで納品してくれなかったそうです。 そのロゴと […]
当社で開発・運用しているWEBサービス・アプリのPR動画を作ってみました。
こんにちは。 今回は弊社の便利なWEBサービスやアプリをまとめました。 気になるものがありましたら触ってみていただけるとうれしいです！ 目次1 ノミトモ2 Grmo3 COLORBOX4 proG hospital5 proG hospital6 かわいいタイマー ノミトモ ノミトモは一対一のサシ飲みから大人数の飲み会、合コンまで、飲み会を通じた出会いや仲間作りをサポートするコミュニケーションサイトです。 誰かと飲みたいけど身近な人と都合が合わない…という方に便利です。 毎日 […]
【photoshop】複雑な画像を毛先まで簡単に切り抜く方法
今回は、「選択とマスク」機能を使用した画像の切り抜きを紹介します。全体で10分程の作業です。 使用するのはこの画像。女の子の髪の毛と背景の切り抜きが複雑そうです。 目次1 切り抜く範囲を大まかに選択する2 「選択とマスク」機能を開く3 作業に適した表示を選ぶ4 「境界線を表示」にチェックを入れる5 境界線調整ブラシツールを使用して、境界を調整したい箇所をなぞる6 「境界線を表示」チェックをはずす7 チェックを付けたり外したりして確認しながら、細部を調整8 微妙に残った背景、色 […]
【Illustrator】複数の要素のカラーを一括で変更するワザ
今日はアプリのモックアップなどを作成する時に便利なTipsを紹介します。 例えばこの状況で、headerの色やボタンの色に変更が入ったら、とっても面倒ですよね。ページがたくさんあればなおさらです。 沢山あるオブジェクトをひとつひとつ選択して色を変更しても良いですが、実はこの作業はもっと時短できます。 目次0.1 共通の塗りをまとめて変更する2つの方法0.2 方法1：何度も使用する色を「グローバルなカラー」としてスウォッチに登録する0.3 方法2：共通の色を選択する機能を使用す […]
SVGアニメーションを気軽に作成！Lazy Line Painterを使おう
こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 目次1 1.jQuery本体とjquery.lazylinepainterを読み込ませよう2 2.SVG画像を読み込ませてサイト上からコードを作成2.1 IDを変更2.2 線のデザインを変更3 3.HTMLに表示させるエリアを追加 1.jQuery本体とjquery.lazylinepainterを読み込ませよう とりあえずはjQuery本体とGith […]
YouTubeの埋め込み動画をYouTube Player APIでコントロールしよう！
こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 目次1 IFrame Player APIを読み込ませよう2 youtubeにアップした動画を表示させる3 ちなみに3.1 かわいいタイマー3.2 ノミトモ3.3 Grmo3.4 COLORBOX IFrame Player APIを読み込ませよう […]
【photoshop】トーンを合わせて写真を自然に合成する
今回はこちらのペンギンの写真に帽子をかぶせる合成をしてみましょう。 ペンギンの写真は青みのトーンが強く、女性の写真は赤みの強い写真なので、このまま切り抜いて合成してしまうと帽子が浮いて見えてしまいます。 そんな時にはphotohsopの「カラーを適用」という機能が大変便利です。カラーを適用の機能について、使い方をお話ししたいと思います。 目次1 手順2 1.合成元の写真と、合成する写真、両方のファイルを開く3 2.合成する写真に「カラーを適用」する4 3.画像を切り抜く5 4 […]
様々なタブの切り替えを簡単に実装！Tabsletを使おう
割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 目次1 使い方1.1 通常のタブ1.2 アクティブの指定をデフォルトでする1.3 hoverだけで開くタブ1.4 タブにフェードのアニメーションを付ける1.5 自動でタブを切り替える1.6 コントローラーを付ける1.7 タブの切り替え時にアラートをだす1.8 タブの切り替え後にア […]
【フリー素材】Web年賀状を送ろう！
2018年度、戌年のWeb年賀状を作成しました！ 文章や住所を書き換えて、お手持ちのサーバへアップすれば、簡単にWeb年賀状を作成できます。 後は丁寧な文言でメールにてURLを送ればOK完了です。紙の年賀状を刷らなくても良いのでコスト削減にも。 商用利用OKです。ぜひご利用ください。 DEMO zipファイル 更新方法は以下をご一読ください。 目次1 更新できる箇所1.1 画像を差し替える1.2 URLを差し替える 更新できる箇所 ①あいさつ文 ②署名 ③画像 ④会社ロゴ ⑤ […]
フリーで使えるwebフォント「Google Fonts」を試してみました
こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス 目次1 M+ 1p2 Rounded M+ 1c3 はんなり明朝4 こころ明朝5 さ […]
紙面デザイナーが、WEBやアプリをデザインする時に注意したいことまとめ
昨今、もう切っても切り離せないWEBやアプリ。私自身職業柄、デザイナーの知り合いが多く、良くWEBの注意点を質問されることが多いです。今回はその注意点と、簡単な説明をしてみたいと思います。 目次1 対応の端末を事前にしっかりと確認する2 デザインデータのカラーモードをRGBにする3 デザインデータの単位をピクセル（px）に設定する4 基本の解像度は72dpi5 デザインデータを作成する際の横幅6 忘れがちな素材 対応の端末を事前にしっかりと確認する 事前に確認しておかないと後 […]
SVGとCSSを使って複雑な形のボタンのhoverを設定する
リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。 ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。 透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。 PCから動作を確認してください。 別タブで表示 これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。 SVG […]
HTMLに「role属性」を付与してWebアクセシビリティの向上を目指す
今日は、HTML5より正式に採用された「role属性」について書きたいと思います。 目次1 role属性とは2 では、実装する必要はあるのか3 実装方法4 role属性の種類 role属性とは role属性は、このように使用します。 見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。 では、実装する必要はあるのか 2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を […]
コンテンツを魅力的に演出できるjQueryプラグインのまとめ2
こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ 目次1 Enllax.js2 ScrollMagic3 Horizontal Timeline4 Midnight.js Enllax.js パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグイン […]
キャッチコピーやデザインの説明に使えるワード集
日頃、キャッチコピーやデザインの説明を考える際に時間がかかりがちなので、時短のためにワード集を用意しました。この中からイメージにあった単語を拾ってきてアレンジ。デザイン用語ではなく、分かりやすいイメージを幅広く集めています。（色の違う文字は好きな単語を当てはめてください） 「どんな」「何」「どうした」の3種類でざっくりと分類しています。 ワード集のエクセル版はこちらから 目次1 どんな2 何3 どうした どんな 印象的な ダイナミックに 力強い さりげなく 整然とした 統一感 […]
知っておくと便利なcssの小技 part9
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 目次1 ナビをhoverしたときに、中央から線を出す1.1 14行目1.2 16行目1.3 18～25行目1.4 26～28行目1.5 29～31行目1.6 33行目～2 背景を固定する2.1 3行目2.2 4行目 ナビをhoverしたと […]
【自作背景】星空をつくる
今回も自作背景を作っていきましょう。今日のテーマは「星空」。 目次0.1 手順1 01.星を散らす1.1 02.空の写真を調整・合成する 手順 01.星を散らす 02.空の写真を調整・合成する 実はとても手順が少なく、カンタンに作成できます。 01.星を散らす まずは画面に星を散らしていきます。まずは下準備。白一色のカンバスを用意します。 色の設定をします。 描画色を白、背景色を黒にします。 「フィルター」＞「フィルターギャラリー」＞「ちりめんじわ」を選択し、下記のように適用 […]
知っておくと便利なcssの小技 part8
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 目次1 テーブルを均等配置にしたい2 画像を丸く切り抜きたい テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい！という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに […]
【自作背景】photoshopで雲を描く
ここにこういう素材が欲しい…けれどちょうどよい素材が無い。そんな時は自分で素材を作ってしまいましょう。 今日はphotoshopで空を描きたいと思います。素材は沢山作り方のチュートリアルがありますが、今回は私なりの方法をご紹介します。 サイトに使いたい写真の空を思い浮かべて… 慣れれば短時間で作れますし、どんどん応用が利くと思います。 目次0.1 手順1 01.一番下のレイヤにグラデーションオーバーレイをかける2 02.一番上のレイヤーに白色で大まかに雲のベースを描く3 03 […]
オブジェクトを生成する関数を作ろう CreatJS
その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]
トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2
前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 目次1 単純にオブジェクトを複数作ると…2 たくさんのオブジェクトを生成する3 複数の […]
運営会社:株式会社8bit
制作サービス
運営サービス
