こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 目次1 グラデーション1.1 Ultimate CSS Gradient Generator1.2 Blend1.3 shade1.4 CSS Gradient Generator1.5 Gradient Generator2 ボタン2.1 Grad32.2 CSS3 Button Generator2.3 Css Gradient Butto […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 目次1 日本語サイト1.1 I/O 30001.2 81-web1.3 MUUUUU.ORG1.4 ARTNOC.COM1.5 S5-Style1.6 Japan Web Design Gallery1.7 Web Design Clip1.8 WEB DESIGN GALLERY for WEB DESIGNERS1.9 responsive Web Design JP2 海外サイト […]
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 目次1 ヘアスタイルを修正2 服や小物の色を調整する3 肌や前髪をきれいに ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了 […]
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 目次1 画像で作成1.1 Loader Generator1.2 Preloaders1.3 Loadinfo1.4 Ajaxload2 CSSで作成2.1 SpinKit2.2 Single Element CSS Spinners2.3 CSS Load.net3 SVG/CSS/GIF で作成 […]
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 目次1 全写真共通1.1 写真の輪郭をくっきりさせる2 建物編2.1 主役の建物を垂直にする2.2 建物を切り抜いて背景の天気をよくする 全写真共通 写真の輪 […]
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 目次1 アコーディオンメニュー1.1 slicknav1.2 jQuery slimMenu1.3 MeanMenu2 ドロワーメニュー2.1 Drawer2.2 jQuery.offcanvas2.3 Pure Drawer2.4 Bouncy Material Design navigation drawer in CSS2.5 T […]
前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 目次1 sin、cos、tanの基本の公式2 円弧上の点を求める三 […]
勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 目次1 括弧付きの数字リスト2 文字を省略する 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか？ そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 ま […]
こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 目次1 ウィンドウサイズによってテキストを改行させたい2 テーブルのレイアウトをウィンドウサイズによって変更する ウィンドウサイズによってテキストを改行させたい レスポン […]
平素は格別のお引き立てをたまわりまして誠にありがとうございます。 当社では以下の日程で年末年始休暇を取らせていただきます。 2016/12/28(水)～2017/1/4(水) 12/28(水)については緊急対応以外の業務以外の通常業務は行いませんので、ご容赦願います。 なお、12/28以降にご連絡いただきましたご依頼については、年明けの1/5(木)からの対応とさせていただきます。 運用中の各種Webサービスについても、緊急性の高い不具合対応以外のサポートについては、年明けの1 […]
こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 目次1 Awesome Screenshot Plus2 FireShot3 FireShot4 Firefoxの開発者ツール Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの […]
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 目次1 フリーソフトを使って作成します。2 詳細な手順 […]
こんにちは、工藤です。 今回は個人的に設定しておくと便利なcssをご紹介します。 目次1 box-sizing: border-box;をユニバーサルセレクタで設定2 aタグをhover時にふわっと表示させる box-sizing: border-box;をユニバーサルセレクタで設定 初期状態だとpaddingとborderの幅や高さを含めずに計算してしまうのですが、『box-sizing: border-box;』を記述することでpaddingとborderも含めて計算して […]
よくWebシステムの要件定義をまとめていると段階で、拡張性のあるシステムにして欲しい、ということをよく言われます。こういう機能を追加したい、こういう表示を追加したいなど、将来的に追加オーダーを取り入れやすく作って欲しいということです。 これには、改造があったとしても少しの手間で改造が済むようにしたい、改造コストを抑えたいという意図があります。 システム開発を発注した方や実際に開発に携わっている方であれば分かると思うのですが、システムの改造には結構な費用がかかります。 内容によ […]
制作会社でチームでWebサイト制作をおこなっていると、デザインの良し悪しというのはデザイナーさん自身に直接ぶつけてくる方はかなり少ないです。 たいてい、ディレクターなどが伺った感想をオブラートに包みつつ、気を使いながら修正内容を伝える場合が多いのではないでしょうか。 Web制作はディレクター、デザイナー、マークアップエンジニアなど役割分担が詳細化されているので、それぞれの担当者がお客様の生の感想や意見を聞くことが少ないように思います。 率直なお客様の意見や要望というのは、制作 […]
当社ではWebサービスの運営や自社プロダクトの開発を行っています。 同業の制作会社の方とお話しをする機会があると「自社サービスを作りたいとは思ってるんだけど受託制作の合間だとなかなか出来ないんだよね」ということをおっしゃられる方がいらっしゃいます。 現在当社は10人に満たないスタッフで切り盛りしています。 受託制作をメインとしつつ、近年では少し減りましたが自社プロダクトのリリースを続けています。 企画立案からサービスやプロダクトをリリースするのは結構時間がかかります。 確かに […]
受託制作でWebサイトを制作していると、どうしてもお客様の当初のご要望が広がったり、やりたいことが追加されたりして、最初に見積りの段階から制作費が増えていくことが多くあります。 お客様が納得されていれば良いのですが、大半の方は後からお金が追加でかかる、というのはあまり心象が良くないことは確かです。 私自身も最近、エアコンの取り付けで追加料金をその場で請求され、納得いかない気持ちになったことがあります。家まで来ていただいて、取り付けてもらわざるを得ない状況で、ホースの長さが足り […]
当社では個人向けのWebサービスの他に、企業様へ提供するツールも多く開発しています。 以前は企業向けサービスもクラウドサービスとして提供していたのですが、色々なお客様の声を伺っていると、自社で借りたWebサーバなどに設置するオンプレミス型の方が運用に適しているようだと感じました。 そこで、思い切って昨年からクラウドサービスで月額課金するのではなく、売り切りのオンプレミス型のツールとして一新しました。 クラウドサービスには手軽にすぐに利用出来たりと、利用者にとっても大きなメリッ […]
Webサイトに対しての考え方は企業や担当者によって大きく異なります。 それが、制作費の面に大きく出てきます。 紙媒体や動画に価値を見出している企業であれば、Webサイトにはお金をかけません。 これからはWebだよ！とこちらが思っていても、発注される方がそう思っていなければなかなか費用を捻出することが難しいのが現実です。 そういう中で、制作のご相談を受けていると、正直なところ「費用的に見合わないな」と感じるような予算の制作案件もでてきます。 全国共通Web制作価格みたいなものが […]
最近のWebサーバは価格競争が進んで来て、かなり安値で大容量のサーバをレンタルできるようになってきました。 当社では、新規のWebサイト立ち上げの際に、Webサーバの契約も一緒に提案することがよくあります。お客様によってはかなり昔にレンタルしたサーバなので、プラン自体も相当古く、容量は少ないのに費用はそのままレンタルされていることも多々あります。 昔借りていたよりはるかに安い値段で、今までよりも大容量のサーバが借りれたりします。 しかし、企業サイトの運営用に借りたWebサーバ […]
今年に入ってから新しいお客さまとの受託制作や、社内のWebサイトの制作を行っていて、デザインの進め方の難しさを改めて痛感しています。 デザインに対してのこだわりというのは、担当者によってかなり温度差があり、自分も含めてこだわりの強い方だとデザイン制作はかなり難航します。 難航する理由として、ひとつはデザイナーの個性やセンスとの相性問題があります。 デザイナーも人間ですので、その人なりの個性やセンスがあります。そこが合わないとなかなかお客様の欲しいデザインに近づけなかったりしま […]
本日、Webサーバに設置するだけでオンラインストレージの運用ができるファイラーツール「keybox(キーボックス)」を発売しました。 オンラインストレージサービスはたくさんあります。 しかし、クラウドサービスでは情報流出などの話も聞くので、機密ファイルなどを管理するのはちょっと不安、という企業のご担当者様に向けたツールとなっています。 Webサーバをすでに使われている企業様であれば、空き領域などを使ってすぐにでも自社のオンラインストレージを運用することが出来ます。 (以下プラ […]
運営会社:株式会社8bit
制作サービス
運営サービス
