Flexboxを使いこなそう！の第5弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- [第4回] Flexboxを使いこなそう！-水平方向の配置指定の仕方- 今回は垂直方向の配置指定についてです。 目次1 垂直方向の配置指定1.1 stretch – 初期値1.2 flex-start […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 以前紹介した記事はこちら hover時に素敵な動きを加えてくれるcss3アニメーション10選 今回は一部jsやSVGと組合せているものもあります。 また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。 目次1 Creative Button Styles2 Creative Link Effects3 Button Styles Inspiratio […]
Flexboxを使いこなそう！の第4弾です。 [過去の記事] [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- [第3回] Flexboxを使いこなそう！-子要素の折り返しを指定する- 今回は水平方向の配置指定についてです。 通常でしたらfloatやtext-align等の指定を行いますが、Flexboxは独自の指定があります。 目次1 水平方向の配置指定1.1 flex-start ̵ […]
昨日、Android版 家計簿アプリ「ぼくの家計簿」をリリースしました！ ぼくの家計簿は毎日家計簿をつけるのが面倒な人でも、毎月の予算管理として使える家計簿アプリです。覚える機能が少なく、シンプルですぐに使えます。 目次1 こんな方におすすめ2 使える！便利な機能2.1 固定費管理2.2 カテゴリ管理2.3 締め日の設定2.4 パスコードロック こんな方におすすめ 家計簿は続かないけど、毎月の予算管理をしたい。 たくさんの機能よりシンプルに家計簿をつけたい。 使える！便利な機 […]
Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。 jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。 AOSの使い方 とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。 CSSの読み込み jsの読み込み CSSはhead内に、jsはbody内で読み込ませてください。 あとは読み込ませた後ろにAOS.init()の記述をして […]
Flexboxを使いこなそう！の第3弾です。 [第1回] Flexboxを使いこなそう！-基本の書き方- [第2回] Flexboxを使いこなそう！-子要素の並び順を指定する- 今回は子要素の折り返しについて書いていきます。 目次1 子要素の折り返し1.1 折返しさせない場合1.2 折返しさせる場合1.3 折返しさせつつ、並び順を下から上にする 子要素の折り返し まずは折り返しについてです。 Flexboxは『並べる』ことを前提にした機能なので、デフォルトのままだと外側のサイ […]
Flexboxを使いこなそう！の第2弾です。 [前回] Flexboxを使いこなそう！-基本の書き方- 今回は子要素の並び順の指定の仕方についてです。 並びの指定については『flex-direction』プロパティを使っていきます。 これを使えば『1,2,3,4…』と並んだ子要素を『4,3,2,1…』といったように反対側から並べる事もできちゃいます。 目次1 子要素の並び順を指定しよう-横並び-1.1 左から右に並べる1.2 右から左に並べる2 子要素 […]
スマートフォンアプリのスプラッシュ画面をデザイン機会があったので、参考にデザインを収集しました。 目次1 Pokémon GO2 どうぶつの森 ポケットキャンプ3 CamScanner4 Kindle5 Waaaaay!（うぇーい！）6 SWORKIT7 UBER EATS8 Dr.Wallet9 Google Home10 LIMIA11 April Pokémon GO 公式: Pokémon GO 皆さんご存知のポケモンGOです。NIANTICのロゴの下に横線があるので […]
当社によくあるご相談で、「Webサイトを任せていたWeb制作会社解散してしまった」「制作をお願いしていたフリーランスと突然連絡がつかなくなってしまった」ので何とかして欲しいといった内容がよくあります。 特にここ数年で増えてきているように感じます。 引き継ぎを行ってくれれば良いのですが、相談を受けた時点ですでに制作会社やフリーランスと連絡がつかないといったケースが多いです。 ご相談いただいて時点で、仕様書などのドキュメントやFTPなどのサーバ接続情報も何も持っておらず、サーバか […]
仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 目次1 Flexboxって？2 子要素をならべてみよう3 子要素を同じ割合で並べてみよう4 子要素を違う割合で並べてみよう5 片方は可変、片方は固定サイズで並べてみよう Flexboxって？ Flexb […]
当社ではなるべく定時退社をこころがけています。 個人的にシステム会社やWeb制作会社を何社か経験して、どこも終電や休日出勤は当たり前、22時上れればラッキー！というようなちょっとおかしい生活をしていた時期もありました。 「遅くまで働いている＝頑張っている」という風潮をなくしたいと考えて今日にいたっています。 定時退社といっても、上司である私自身が残っていると、全員ある程度空気を読みつつ帰る感じになるので真っ先に帰るようにしています。その分朝は1時間半くらい早めに出社するように […]
当社では昨年あたりから、飲食店様のWebサイト制作についてご相談を受けたり、実際に制作したりする機会が増えてきました。 色々とお話しを伺っていくと、制作費用面やグルメサイト(クーポンサイト)掲載やクチコミサイトでの評価のお話しなど、インターネットでのお店のPRを巡って色々とご検討されているオーナー様が増えていることを実感しました。 中でもグルメサイトへ掲載するかWebサイトを作るか、迷いに迷って結局グルメサイトに掲載される方、せっかくWebサイトを作ったけど運用しきれなくて閉 […]
当社では創業からいくつものWebサービスをリリースしては閉鎖して、ということを繰り返してきました。そんな中で、最近ではBtoBサービス、企業の日常業務で使えるWebサービスに力を入れています。 収益モデルはBtoBサービスですので、広告収入ではなくユーザー課金がメインです。 ありがたいことに、ここ最近でやっと課金してご利用いただけるユーザー様が出てきました。 この記事で紹介するサービスは、具体的にいうと「Grmo(グルモ)」というグループウェアです。 (サービス紹介の記事では […]
インスタ映えという言葉が2017年の流行語大賞にノミネートされました。 個人的には昔のInstagramは写真加工の格好良いフィルターが付いていて、加工したおしゃれ画像を投稿するというサービスで、フィルター機能の面に注目していました。 それが今や様々な使い方やPRに使われるようになってきています。 特に飲食関係が目立ちます。 私もInstagramを使っていますが、食べ物の写真をアップする方はかなり多いです。 フィルター効果もあってかなかなか良い写真がたくさんアップされていま […]
Web制作を進めていく中で、お客さまと制作会社の認識の違いで、作業範囲や修正回数を巡ってトラブルが発生することがあります。 当社でも恥ずかしながら、お客さまに説明が不足していたり、ご理解いただいていたものと解釈して制作を進めてしまい、トラブルとまではいかないにしても軽く揉めることは多々あります。 品質や進捗遅延のクレームに関しては制作側の責任ですが、仕様変更や追加作業の範囲をめぐる揉め事についてはお互いの主張する部分もあるので、なかなか難しい問題です。下手をするとお互いの主張 […]
最近、Web制作のご相談を受けていて、お客さまから「デザイナーな芸術家じゃないんだかさ！」というお話を伺うことが続いて何度かありました。 話のきっかけは、あるお店の名刺やロゴデザインをデザイナーにお願いした際に、早く名刺と店の看板用にロゴが欲しかったのに、なかなか納品してくれなかったという話でした。 詳しく理由を伺ってみると、作業自体が間に合っていなかったのではなく、デザイナーがロゴにいまいち納得いかないから納品できない、ということで納品してくれなかったそうです。 そのロゴと […]
こんにちは。 今回は弊社の便利なWEBサービスやアプリをまとめました。 気になるものがありましたら触ってみていただけるとうれしいです！ 目次1 ノミトモ2 Grmo3 COLORBOX4 proG hospital5 proG hospital6 かわいいタイマー ノミトモ ノミトモは一対一のサシ飲みから大人数の飲み会、合コンまで、飲み会を通じた出会いや仲間作りをサポートするコミュニケーションサイトです。 誰かと飲みたいけど身近な人と都合が合わない…という方に便利です。 毎日 […]
今回は、「選択とマスク」機能を使用した画像の切り抜きを紹介します。全体で10分程の作業です。 使用するのはこの画像。女の子の髪の毛と背景の切り抜きが複雑そうです。 目次1 切り抜く範囲を大まかに選択する2 「選択とマスク」機能を開く3 作業に適した表示を選ぶ4 「境界線を表示」にチェックを入れる5 境界線調整ブラシツールを使用して、境界を調整したい箇所をなぞる6 「境界線を表示」チェックをはずす7 チェックを付けたり外したりして確認しながら、細部を調整8 微妙に残った背景、色 […]
今日はアプリのモックアップなどを作成する時に便利なTipsを紹介します。 例えばこの状況で、headerの色やボタンの色に変更が入ったら、とっても面倒ですよね。ページがたくさんあればなおさらです。 沢山あるオブジェクトをひとつひとつ選択して色を変更しても良いですが、実はこの作業はもっと時短できます。 目次0.1 共通の塗りをまとめて変更する2つの方法0.2 方法1：何度も使用する色を「グローバルなカラー」としてスウォッチに登録する0.3 方法2：共通の色を選択する機能を使用す […]
こんにちは。工藤です。 今回は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の埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 目次1 IFrame Player APIを読み込ませよう2 youtubeにアップした動画を表示させる3 ちなみに3.1 かわいいタイマー3.2 ノミトモ3.3 Grmo3.4 COLORBOX IFrame Player APIを読み込ませよう […]
今回はこちらのペンギンの写真に帽子をかぶせる合成をしてみましょう。 ペンギンの写真は青みのトーンが強く、女性の写真は赤みの強い写真なので、このまま切り抜いて合成してしまうと帽子が浮いて見えてしまいます。 そんな時にはphotohsopの「カラーを適用」という機能が大変便利です。カラーを適用の機能について、使い方をお話ししたいと思います。 目次1 手順2 1.合成元の写真と、合成する写真、両方のファイルを開く3 2.合成する写真に「カラーを適用」する4 3.画像を切り抜く5 4 […]
割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 目次1 使い方1.1 通常のタブ1.2 アクティブの指定をデフォルトでする1.3 hoverだけで開くタブ1.4 タブにフェードのアニメーションを付ける1.5 自動でタブを切り替える1.6 コントローラーを付ける1.7 タブの切り替え時にアラートをだす1.8 タブの切り替え後にア […]
2018年度、戌年のWeb年賀状を作成しました！ 文章や住所を書き換えて、お手持ちのサーバへアップすれば、簡単にWeb年賀状を作成できます。 後は丁寧な文言でメールにてURLを送ればOK完了です。紙の年賀状を刷らなくても良いのでコスト削減にも。 商用利用OKです。ぜひご利用ください。 DEMO zipファイル 更新方法は以下をご一読ください。 目次1 更新できる箇所1.1 画像を差し替える1.2 URLを差し替える 更新できる箇所 ①あいさつ文 ②署名 ③画像 ④会社ロゴ ⑤ […]
こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス 目次1 M+ 1p2 Rounded M+ 1c3 はんなり明朝4 こころ明朝5 さ […]
運営会社:株式会社8bit
制作サービス
運営サービス
