Web制作会社に発注して制作を依頼したけれど、やりにくいので他の制作会社に変更したい、などということで案件のお話しをいただいたりすることがあります。 制作会社を替えたい時の理由はいくつかあると思います。 リニューアルでデザインテイストを変更したい、会社のルールで毎回相見積をきちんと取って業者選定をしないといけない、などなど。 中には後ろ向きの理由もあって、一番よく聞くのが「今の制作会社とうまくいってないから変えたい」という理由。 当社の場合は営業がいないので、出来ればお話しい […]
今回は印刷対応 print.css について。 Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。 現象が起きるHTMLデモ 現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技をご紹介します。 目次1 ブロック要素（div等）全体にリンクを付ける2 横幅可変のページのページャーを中央寄せにする2.1 ちなみに… ブロック要素（div等）全体にリンクを付ける div等のブロック要素全体にリンクさせたい…なんてことありますよね。 HTML5やjsで解決出来る場合もありますが、そうはいかないなんて時もありますので…自分はよくこの方法に頼ることが多いです。 HTML とりあえずHT […]
3月も近づき、制作業界は期末の納品で忙しい時期にやってまいりました。 どこの制作会社も忙しいことと思います。 受託制作をやっていると、クライアントによってWebサイトに対しての認識が結構異なります。制作の人間にとっては当たり前、常識、ということでも、きちんと説明しないと、後々に認識が異なってしまい、出来上がったサイトに大量の修正をしないといけない事態になってしまうこともあります。 クライアントとの認識違いがあると、「リテラシーが低い」と言われる方がいますが、制作を生業としてい […]
今回は活字風の文字の加工を行うチュートリアルです。エッジに潤いのある加工で、シリアスな雰囲気を出したい、温かみを出したい、様々な雰囲気の演出に使用できます。 ビットマップデータのみで良い場合は、photoshopだけで済みます。パスデータにしたい場合は、Illustratorでひと手間加えると綺麗なパスが出来上がるので試してみて下さいね。 目次1 手順2 まずはphotoshopで加工2.1 テキストツールでテキストを設定します。2.2 文字をラスタライズ2.3 フィルタ効果 […]
Apacheのアクセスログは便利ですが、いざ見ようと思うと大変ですよね。 全てのアクセスが記述されるので、例えばiPhoneのアクセスログだけ見たい場合はわざわざgrepをかけて見る必要があり、かなりめんどくさいです。 ですのでiOSおよびAndroidだけのアクセスログを出せるような設定を簡単にまとめました。
こんにちは、工藤です。 今回はこのブログでも使っているWordPressのおすすめプラグインと、簡単ではありますが使い方をご紹介します。 目次1 手軽にブログの記事の装飾をしたい1.1 Shortcodes Ultimate2 ソースコードを記事で綺麗に表示させたい2.1 Crayon Syntax Highlighter3 デフォルトでアイキャッチを入れたい3.1 Default Thumbnail Plus 手軽にブログの記事の装飾をしたい Shortcodes Ulti […]
今回は、条件分岐について。 条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。 まずクリックするとランダムで値を吐くボタンを作ります。 ▼ボタンをクリックすると0~100までの点数が表示されます。 クリック 例えば、この結果に応じて下記のコメントを表示させるとします。 ・0～29点の場合は”初心者” ・30～49点の場合は”中級者” ・50～79点の場合は” […]
今、当社のWebサイトのリニューアルを検討しており、他の制作会社のサイトなど色々と参考にさせていただいています。 クライアントへの提案は出来るのに、自分たちのWebサイトはどうしたら良いのか方向性がなかなか定まらず悪戦苦闘の毎日です。今のところ、公開できる目処が立っておりません。 さて、他の制作会社のサイトを拝見させていただいて気が付いたのですが、制作費用について掲載している会社はあまりありません。 掲載している会社もあるのですが、イケてるデザインのまとめサイトなんかに紹介さ […]
こんにちは、工藤です。 この度こちらの『モノづくりブログ』をリニューアルしました。 コンテンツも多くなってきたため、それらをシンプルかつ見易くまとめることが目的でした。 今回は前のブログと比較しつつ、色々とご紹介できたらと思います。 目次1 TOPページ2 記事ページ TOPページ 見た目についてはよりシンプルに、どちらかというとコンテンツの写真や画像を活かすようなものになりました。 前より線が細い印象になったかと思います。 コンテンツの並びについては、以前は新着の記事を並べ […]
お酒を飲んでいる時にちょっとしたアイデアが良く浮かぶんだよね。 お酒を飲む人でこういうことを言っている人をよく見かけないでしょうか。 私自身もそうですが、お酒を飲んでいる時の方が、ちょっとした思い付きやアイデアが出やすいように思います。 リラックスしているし、気が大きくなっているので自由な発想が出来るのでしょう。 しかし、お酒を飲んでいる時に思い浮かんだアイデアが具現化されることってあまりないように感じます。 アイデアの内容やビジネスにも依りますが、Webサービスやアプリなん […]
今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら 目次1 まず下準備2 Step2:次にHTMLの準備3 Step3:jsを書き込む まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は count.j […]
こんにちは、工藤です。 今回は普段の作業がデザインとHTMLとcssコーディングがほとんどの私がphpの勉強をしたのでその過程でわかったことだとかを載せようかと思います。 私ごとなのですがいかにも『プログラム言語』というものに若干苦手意識がありまして…。 ですが浅くでも知っておいた方が何かしらの役には立つだろう、と思い至ったのでとっつき易い（と言われている）phpを勉強することにしました。 とりあえず今回はお問い合わせフォーム（っぽいもの）の作成をしました。 目次1 目標2 […]
制作業界で仕事をしていると、アイデア提案を要求される場面が多く出てきます。 特にディレクターやデザイナーなどの役割では、アイデアをどれだけ出せるか、形にしていけるかが重要となってきます。 基本的にアイデアは誰でも持っていると思います。 少なくとも普段使っているWebサービスやサイト、ゲームなどで、もう少しこうだったら良いな、こういうのあったらやってみたい、使ってみたい、という感想は持っているでしょう。それもまたアイデアのひとつです。 会社でアイデア会議とかブレストとかやり出す […]
当社は残業をほとんどしないという文化の会社ですが、制作業界全般でみると、かなり残業が多いようです。 4月から制作業界に入る予定の学生さんの中にはドキドキされている方も多いと思います。 私自身、制作会社やシステム会社に在籍していて、プロジェクトが炎上したりすると、どうしてこんなことになったのかな。 タスク的には帰れるのに、なんでみんなそんなに会社に残ってるのかな、と疑問に思ったことが多々あります。 当社は基本的には、定時であがれるよう仕事を調整しています。 もちろん、定時以降も […]
画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 目次1 下準備2 縦横比を調べるには？3 例1：background-size:cover;のような効果をimgで得る3.1 ▼HTML3.2 ▼CSS3.3 ▼js4 例2：例1を複数のdivに適用させたい場合4.1 ▼js 下準備 jQueryと、自分で作ったjav […]
こんにちは、工藤です。 今回はiPhone/Android端末の画面解像度について、サイトやアプリ作成用に個人的に簡潔な表が欲しかったので備考録がてらまとめておきます。 スマートフォンのみの情報です。 2016年1月現在の情報となります。 目次1 iPhone2 Android端末 iPhone 本体名 ディスプレイ解像度（横×縦/px） 画面比率 Retina iPhone/iPhone 3G,3GS 320×480 3:2 1 iPhone 4,4S 640×960 3: […]
明けましておめでとうございます。 本日1/8は当社、株式会社8bitの創立記念日です。 2009年1/8に設立をして早くも7年目となりました。 細々とですが、なんとかやっております。 7年目の節目ということで、経営側の視点で苦労したことなど含めてを書いてみます。 これから制作会社を立ち上げよう、と思われている方などに読んでいただけると面白いかと思います。 目次1 面白いWebサービスをひたすら作ろうという日々2 人海戦術失敗、売上売上の日々3 BtoCサービスからBtoBサー […]
明けましておめでとうございます。本年もどうぞよろしくお願い致します。 皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。 さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。 デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。 […]
こんにちは、工藤です。 今回はちょっと変わった、インパクトのあるメインビジュアルを集めました。 やっぱりサイトに入った時にすぐに目に入るものですから印象に残るようデザインしたいですよね。 目次1 にこにこ小児歯科2 社会福祉法人富士会 富士保育園3 ペエ歯科クリニック4 昭和くらし不動産5 小浜こども園6 雪見亭7 くまもと田崎市場8 MARUNOUCHI – THE HEART OF TOKYO –9 JIA関東甲信越支部 大学院修士設計展 2015 […]
jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。 目次1 方法は2つ2 例を置いておきます 方法は2つ デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時 […]
年の瀬もせまり、忘年会、新年会のシーズンがやってきました。 何かとお酒を飲む機会が増えますね。 私は最近休肝日をきちんと週に3日設けるようにしているのですが、年末年始で自分ルールが崩れてしまいそうで心配です。 ということで、飲みの多いシーズンにちなんで、今回は会社の飲み会あるある漫画を描いてみました。 是非使ってみてください！ ノミトモ http://nomi-tomo.net/
平素は格別のお引き立てをたまわりまして誠にありがとうございます。 当社では以下の日程で年末年始休暇を取らせていただきます。 2015/12/29(火)～2016/1/3(日) 12/28(月)については緊急対応以外の業務以外の通常業務は行いませんので、ご容赦願います。 なお、12/28以降にご連絡いただきましたご依頼については、年明けの1/4(月)からの対応とさせていただきます。 運用中の各種Webサービスについても、緊急性の高い不具合対応以外のサポートについては、年明けの1 […]
今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 目次1 SVGの基本2 SVGにjQueryで処理を追加する3 jsを書き込む SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分 […]
こんにちは、工藤です。 今回は参考にしたいヘッダーのデザインをまとめました。 目次1 株式会社LITALICO（りたりこ）2 オンリー（ザ・スーパースーツストア）公式通販3 junhashimoto（ジュンハシモト）公式通販4 オーダースーツのHANABISHI5 ていれぎの湯6 KIMAL-キマル-7 オンダパーツ株式会社8 Food & Design Post9 フジ物産株式会社10 ベンワークウェア11 マリモサービスオフィス12 スタジオK13 キリン14 […]
運営会社:株式会社8bit
制作サービス
運営サービス
