女性の写真のフォトレタッチでよく起こりがちなのが、髪と服の色が似ていて、クイック選択ツールで選択範囲が混ざってしまう現象。 今回は色調補正やトーンカーブを使用して、パーツごとに選択できる小技を紹介します。 例えば、この女性の写真の髪の色を変更してみましょう。 目次0.1 1.調整レイヤーを作成し、色の差を作る0.2 2.自動ツールを使用して選択範囲を作成する0.3 3.色を調整1 YoutubeChannelのご紹介 1.調整レイヤーを作成し、色の差を作る 考えてみれば実は簡 […]
今回は知っておくと便利なcssの小技 part13です。 バックナンバー 知っておくと便利なcssの小技 part12 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 目次1 テキストが空の時のみ、『content』でURLを取得し表示させる2 画像をcssのみで切り抜く テキストが空の時のみ、『content』でURLを取得し表示させる リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法で […]
今回はちょっと変わった、おもしろいプラグインをまとめました。 程度を守ればエフェクトがあるとサイトも華やかに見えますね。 目次1 要素が揺れるアニメーションを実現！『CSShake』2 ホバー時に他の要素をぼかす『Item Blur Effect with CSS3 & jQuery』3 テキストにフラットアイコンのようなシャドウをつけてくれる『flat-shadow』4 ホバー時に要素を立体的に！『Tilt Hover Effects』5 画像をかっこいいエフェク […]
コーディングをしているとよくお世話になるfirst-childとfirst-of-typeセレクタ。 ただfirst-childとfirst-of-typeの違いって最初のうちってよくわからないですよね。 今回はその2つの違いについてお話しようと思います。 目次1 first-childが効かない？そんな時はfirst-of-typeで！1.1 囲んでいる要素のなかでの順番の数え方が異なる1.1.1 first-childの場合1.1.2 first-of-typeの場合 f […]
Webサイト制作の現場において、スマートフォン向けサイトは、もはや欠かせない存在となっています。スマートフォンの所有率はなんと76.0%（出典:総務省/2016年）。今後もニーズはさらに高まっていくでしょう。 目次1 既存のPCサイトをレスポンシブ化したい！というご相談が増えつつある2 1.タブレット非対応の場合に崩れが発生！？3 解決 ⇒ viewportの設定を見直し！4 2.iPhoneXの横持ちの幅がブレークポイントを超えている！？5 解決 ⇒ Safari使用時は横 […]
Android版 ダイエットアプリ「どうぶつ・ダイエット」をリリースしました！ どうぶつ・ダイエットは、目標体重の達成率でゆるキャラも一緒にダイエットする、ゲーム感覚でダイエットを楽しめるアプリです。機能はシンプルで誰にでも使いこなせます。 目次1 主な機能2 アプリの特徴 主な機能 ・毎日の体重レコード ・現在の体重に対してのBMI表示 ・体重推移のグラフ表示 ・目標体重の設定 アプリの特徴 目標体重の達成率によって、かわいいパンダのゆるキャラも一緒に進化(ダイエット)する […]
本日、弊社スタッフによる共著が8/10に発売となりました。 (8/9には大型の書店には並んでいるかもしれません) Web制作におけるトラブルあるある事例をまとめた本です。 以前、レクシスネクシス・ジャパン社より出版された「Web業界 受注契約の教科書」「Web業界 発注制作の教科書」の改訂版として、第一法規社より再出版されました。 タイトルに教科書という言葉が使われており、内容としてはちょっと違うのかなということで、対タイトルを変えての再販となっています。 制作会社など受注の […]
今回は個人的に知っておくと便利だなと思うcssの小技part12 -複数の背景要素-です。 バックナンバー 知っておくと便利なcssの小技 part11 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 cssで複数の背景画像・背景色を指定する 1箇所の背景に複数の画像や色を指定したいという事があるかと思います。そんな時に使える方法です。 グラデーションもあるので複雑なように見えるかもしれませんが、案外簡単です。 HTML css とり […]
今回は個人的に知っておくと便利だなと思うcssの小技part11 -ボーダー編-です。 バックナンバー 知っておくと便利なcssの小技 part10 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 目次1 線の最初だけ色を変える2 グラデーションのボーダーで要素を囲う 線の最初だけ色を変える タイトルなどでよくあるボーダーの最初だけ色を変えるあれです。 今までは結構画像などでやることも多かったのですが、レスポンシブが多くなってからはcs […]
PhotoshopのCameraRAWというフィルターの使い方を紹介します。 本来はカメラのデータ形式「RAW」を取りあつかうためのものなのですが、JPGなどの画像データにも適用することができます。 画像のトーンや明度彩度、シャープ、コントラト、レンズのゆがみ、色かぶり、モアレの解消…etc 様々な効果がこのフィルターひとつで調整できるため、作業の時短に有効です。 例えば、こんな風に色を補正することが可能です。 寒そうな廃屋の写真を、黄身っぽいカラーに変換しました […]
最近Androisアプリを制作することが増えてきましたが、バージョン管理をどうするかで少し悩んでいました。 弊社は基本的にSubversionで管理していたのですが、Android Studioでやろうとすると、どうも上手く行かないことが多く、作業効率が良くありません。 そこで思い切ってGitを使う事で、Androidアプリを制作するときにはこのルートを使おうと考えました。 環境は Windows 10 Pro Android Studio 3.0.1 （もう上のバージョンも […]
目次1 Photoshopでmp4データを扱える2 作り方2.1 Photoshopの「タイムライン」パネルを使用する2.2 動画の不要な部分をトリミング2.3 GIFアニメーションをとして書き出す2.4 完成3 Windows10標準搭載の画面キャプチャソフト4 YoutubeChannelのご紹介 Photoshopでmp4データを扱える 実は、Photoshopで、mp4の簡単な編集なら行うことが可能です。ご存知でしたか？ トリミングやほかのフェードインフェードアウトく […]
目次1 現象2 対策 現象 flexboxを使用したページをIEで印刷すると改ページで要素が消える、というバグに遭遇しました。 最新のIE11でも再現したので、おそらくIEのバージョン関係なく起こっているかと思います。 このように1ページ目は平気なのですが、flexboxを使用した要素が改ページ後に真っ白になってしまいます。 対策 印刷用のcssの設定でflexbox部分の代わりにfloatやinline-blockを使用します。 作りによっては高さが揃わない等の悩みが出てく […]
目次1 UI/UXデザインがラクラク！カンプデータが簡単に作れる Adobe XD2 AdobeXDの操作感2.1 オブジェクトの配置2.2 画像のマスクもドラッグするだけ2.3 同じ要素を並べたい！リピートグリッド機能2.4 スクロールの設定2.5 画面遷移の設定を行う2.6 プレビュー3 完成品を共有する4 手元の実機で確認5 Illustrator、Photoshopとの連携 UI/UXデザインがラクラク！カンプデータが簡単に作れる Adobe XD サービスを立ち上げ […]
皆様はプロジェクト開発の情報共有に、どんなツールを使用中でしょうか。 今お使いのツールが使いにくいと感じたことはありませんか？ バグ管理ツール（BTS）は、プロジェクトの理想的な進行管理に際し、必須と言っても過言ではないと思います。 本記事では、理想的なプロジェクト進行管理のため、 簡単に各サービスのポイントをおさえながら、おすすめを紹介していきます。 目次1 そもそもバグ管理ツールとは？2 ツール紹介2.1 Wrike2.2 producteev2.3 Jira Softw […]
今回はIllustratorでスクリーントーンのようなアミカケを作ってみましょう。 応用で斜線や複雑な柄のパターンも登録できます。（Illustrator CCを使用して解説していきます。） 目次1 アミカケを登録1.1 01.パターンを作る1.2 02.作ったパターンをスウォッチパネルに登録する1.3 03.オブジェクトに適用する2 角度やサイズを調整して適用する3 登録したパターンを編集 アミカケを登録 パターンを使用する時は、スウォッチに登録します。 01.パターンを作 […]
今回は個人的に知っておくと便利だなと思うcssの小技part10 -画像編-です。 バックナンバー 知っておくと便利なcssの小技 part9 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 目次1 画像をcssでモノクロやセピアにする2 画像をcssでぼかす 画像をcssでモノクロやセピアにする なんとcssだけで画像をモノクロやセピアにできます。大変便利です。 HTML css filterプロパティを使いモノクロに対しては『gra […]
インターネット上でファイルを共有できるオンラインストレージ。 データのバックアップに使用するのはもちろん、法人向けのビジネスプランの提供も増え、企業間でのデータ共有にも使われています。 最近ではWEBだけではなくスマートフォンでも確認できるなど、ますます便利なものが増えてきました。 今回はそんなオンラインストレージの中から、お勧めの物を厳選しました。 ぜひ導入の参考にしてください。 ※紹介しているオンラインストレージの機能や価格は2018年1月現在のものです。 目次0.1 1 […]
社内での情報共有など、業務効率化にかかせない存在になってきたグループウェア。 4月からの新体制に向けて、自社の業務にあったグループウェアをお探しの企業も多いのではないでしょうか。 ただ、一口にグループウェアと言っても機能や価格はさまざまです。 今回はおすすめのグループウェア10つをご紹介します。 数があり過ぎて一体どのグループウェアを使ったら良いか分からない、という方のために最後に選ぶポイントもまとめてみましたので、グループウェア導入をご検討の方は参考にしてみてください。 ※ […]
今最も勢いのあるSNSである『Instagram』。（以後：インスタ） 最近だと飲食店をインスタで探す、なんて若い方も多いようです。 そのため、お店でアカウントを用意して集客に繋げる方法もでてきました。 お店側としても画像と簡単なテキストを投稿するだけで手軽に管理できるのがよいところです。 ただ、手軽に使えるのが良いところとはいえ集客につなげるには少しコツもいります。 今回はそのポイントをチェックしてみましょう！ 目次1 Instagramで飲食店の集客力をアップするには？1 […]
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 目次1 HTML2 CSS2.1 ::-webkit-scrollbar2.2 ::-webkit-scrollbar-track2.3 ::-webkit-scrollbar-thumb […]
構造化マークアップもSEO的に無視できなくなりつつある昨今ですが、イベント情報の構造化データをサイトで使用している方は要再チェックです。 Googleのガイドラインに、イベント情報の構造化データに「割引クーポン」を追加するのは違反であるとの記述が明確にされました。（2017年11月末） その他にもイベントと関係ない情報をイベントとしてマークアップすることをやめるように書かれています。 場合によっては、Google側からの手動対策の対象となるため、早めの修正が必要となります。検 […]
hreflangというタグ、ご存知でしょうか？実はこのタグ、多言語サイトを作る時に重要な動きをしてくれるタグなんです。 目次1 どうして必要なの？1.1 機会損失を防ぐ1.2 Googleはlang属性を無視2 入れ方2.1 言語コード表例3 うちのサイトは日本語だけ…それでも入れておいた方がいい？ どうして必要なの？ 機会損失を防ぐ 例えば日英の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に日本語が表示されてしまい、読めずに離脱してしまう… […]
CSS3のanimationプロパティと@keyframesを使用すると、CSSのみでアニメーションをすることができます。 複雑なものでなければ簡単にできるので、まずは触ってみましょう。 今回は正方形を長方形にするアニメーションを作成します。 目次1 記述例1.1 CSS（記述例）1.2 HTML（記述例）2 実際にやってみよう2.1 CSS2.2 HTML 記述例 CSS（記述例） HTML（記述例） 基本の形はこうなります。 まず、@keyframesの記述の後に、アニメ […]
PPC、CPC、CPM、……様々な用語が煩雑としていますが、なんとなく調べないまま過ごしていませんか？今回はWEB広告の用語を簡単にまとめました。 目次1 広告手法の種類1.1 ディスプレイ広告1.2 リスティング広告1.3 インフィード広告1.4 インバナー広告（インディスプレイ広告）1.5 インリード広告2 paid search／organic search3 インプレッション4 クリック報酬型広告／PPC5 CPC広告／CPM広告5.1 CPC広告5.2 CPM広告6 […]
運営会社:株式会社8bit
制作サービス
運営サービス
