読者です 読者をやめる 読者になる 読者になる

vol.60 node.jsに触れてみよう サーバーサイドJSとは

こんにちは。ウェブエンジニアの毛利です。 私がウェブ制作に携わるようになった2013年頃から2017年にかけて、ウェブ開発を取りまく環境が目まぐるしく変化していると感じます。PCブラウザの急速な進化、マルチブラウザ化、非Flash化、スマートフォンサイト…

vol.59 WebライティングでUIデザインの 品質を高める

こんにちは。デザイナーの寺田です。 ここ最近、UI/UXという言葉を当たり前に聞くようになりました。 UIデザインが増えて、ユーザーはWebサイトをより直感的に 操作することができるようになりました。 最近ではGUI(グラフィックユーザーインターフェース…

CSS肥大化を抑える 破綻しないコード設計とSassの導入

こんにちは。Webエンジニアの佐藤です。小規模なWebサイトや単体ページならいざ知らず、大規模Webサイトなどを開発する際、CSSが必要以上に肥大化し、気付けば構造が破綻してしまっていることはありませんか? Bootstrapに代表されるCSSフレームワークの選択…

vol.57 Raspberry PiにUbuntu Mateを入れてみよう

あけましておめでとうございます。2017年最初のTIPSです。 Raspberry Pi(ラズベリーパイ)という小型のコンピューターを入手したため、何かできないか?と、すぐにできそうなことを実践してみました。 www.raspberrypi.org 「Raspberry Pi」とはイギリスの…

vol.56 Adobe Premiere Pro 初めてのカラーグレーディング

こんにちは。ディレクターの白子です。 最近Youtubeやvimeoなど高画質で動画の配信が可能となりました。 これまで動画を撮ったことのある人は「せっかく高画質でアップロードできるのだから、色味も自分の思うように補正してみたい!」と思ったこともあるの…

vol.55 人気フレームワーク LaravelをMacにインストールするときの注意点

こんにちは。エンジニアの毛利です。 Webサイトやアプリケーション開発にフレームワークを使うことがあります。 直書きでなんとかなってしまう分量であれば、あえて使う必要はないかもしれません。 ですが中規模・大規模プロジェクト、または長期にわたるプ…

vol.53 撮影がもっとスムーズになる! 撮影前準備のポイント

こんにちは、アシスタントディレクター兼エンジニアの富澤です。近年、映像制作をするために必要なプロユースのビデオ機材や編集ソフトなどが比較的安い値段で購入できるようになり、 個人でもプロに近いクオリティで映像制作をすることができるようになりま…

vol.52 「選ぶ」だけじゃない!自分で作るWordPressのオリジナルテーマ

こんにちは、エンジニアの佐藤です。今や主流となったブログソフトウェア、wordpress。wordpressには無料で使える多くのテーマがありますが、自分で作るオリジナルのテーマを使いたい・作りたいと思う方も多いはず。 HTML・CSSの知識があること、wordpressの…

vol.51photoshopでここまでできる!ビデオタイムラインのアニメーション

こんにちは。イラストレーターの西山です。 比較的簡単なショートアニメの作り方をご紹介しましたが、今回はBOELアニメーション「shimeji」をもとに、専門の動画編集ソフトで作るような複雑でカット数の多い動画をphotoshopのビデオタイムラインを使って作る…

vol.50メジャーアップデート! 高速化したjQuery3.0の特徴

こんにちは。エンジニアの毛利です。 jQuery3.0がリリースされました。 2.x系からのメジャーアップデートで、マイナーアップデートにはない大きな変更を伴います。 また、今までInternet Explorer 8(IE8)の下位バージョンに対応するための1.1x系とIE9以上…

vol.49 子どものUX 子どもを惹きつけるデザインのポイントとは

こんにちは。デザイナーの野中です。 突然ですが、みなさんは携帯電話やスマートフォンをいつから使いはじめましたか?近年スマートフォンやタブレット端末の普及が急速に進み、幼児期からデジタルコンテンツに触れる時間(スクリーンタイム)が増えていると…

vol.48 リスティング広告を始めるなら Google AdWords

ディレクターの白子です。 「リスティング広告」という言葉を聞いたことはありますか。 Yahoo!やGoogleなどの検索エンジンであるキーワードで検索した際に、そのキーワードの検索結果に関連して表示される広告です。 検索結果の上の方や右の方に「広告」と出…

vol.47 游ゴシックの魅力と和文書体の歴史

こんにちは。デザイナーの寺田です。 今回は「游ゴシック」の魅力と和文書体の歴史についてご紹介します。 游ゴシックはここ最近、Webフォントとして使用しているサイトをよく見かけます。 BOELのサイトも最近「Noto Sans」から「游ゴシック」に変更しました…

vol.46夏の伝統色と文様

こんにちは。イラストレーターの西山です。 新緑の若葉の季節になりました。 仕事でも季節に合わせてデザインやイラストを作ることがあります。飲料やアパレル系のwebサイトを見ても春から夏らしい雰囲気になっています。 今回は夏をあらわす日本の伝統色や…

vol.45 すぐに使える!アコーディオンメニューの実装

こんにちは。エンジニアの富澤です。今回はWebページでよくみかけるアコーディオンメニューについて勉強しましたのでご紹介します。アコーディオンメニューは、限られた範囲で多数の項目を一覧したいときに便利です。※本TIPSではHTMLとCSSの基本的な知識があ…

vol.44 モバイルページ高速化 AMP HTMLを作成してみよう

こんにちは。エンジニアの毛利です。 PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。 Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。 高速化のアプローチ方法は、Webプログラ…

vol.43 動画コーデックをマスターしよう

こんばんは。ディレクターの白子です。動画編集をしたり、編集した動画を書き出す際に必要になってくる「コーデック」。たくさんの種類があり、どこでどのコーデックを使うのがいいのかなど 迷ってしまいますよね。 今回は、動画を編集する際に必要なコーデ…

vol.42 コンフリクト、エラーに対応しよう! Github運用実践編

こんにちは。Webエンジニアの毛利です。 今回はGitHubについての話です。 GitHubではソースやファイルを管理するとき、複数の更新者が同時に更新しても変更点のみが蓄積されていくのでファイルをサーバーから直接ダウンロードしたり、そのためファイルの受け…

vol.41 ハンバーガーボタン実装で学ぶJSの基礎

こんにちは。デザイナーの寺田です。 Webサイトでよくみる三本線のメニューボタン。 海外でハンバーガーに見えると言われ 「ハンバーガーボタン」という名前になっています。 「ハンバーガーボタン 実装」で検索すれば ソースを公開しているサイトはヒットし…

vol.40 デジタルイラストで毛の質感を表現する

こんにちは。イラストレーターの西山です。 今回はBOELの2016年賀状のイラストをもとにphotoshopで動物の毛を表現する方法をご紹介します。 photoshopで緻密に動物の毛を描くとき、線を一本一本描くだけではうまくいきません。 とくに失敗に陥りやすい点が2…

vol.39 CentOS7にハイパフォーマンスな
Webサーバーをインストールしよう!
準備編

こんにちは。Webエンジニアの毛利です。 今回はサーバーの構築のお話です。 ウェブサイトを公開したいと思ったとき、Webサーバーの環境が必要になります。 その時、共用レンタルサーバーがもっともお手軽で、わかりやすいです。 しかし、簡単である反面、本…

vol.38 知ると便利なWEB解析ツール
Google Analytics

ディレクターの白子です。 Google Analyticsは、Googleが提供するアクセス解析ツールです。 「どのページがユーザーに見られているか」「どこからのアクセスがあるのか」 「離脱率が高いのはどのページなのか」など、 Webサイトのアクセスに関連するさまざま…

vol.37 識別性、可読性の高いGill Sansの歴史と特徴

こんにちは。デザイナーの寺田です。今回はvol.1 古くから愛されるフォント TRAJANフォントの魅力に続いてフォントの歴史について紹介します。今回紹介するフォントはGill Sans(ギル・サン)です。グラフィックデザイナーであれば一度は耳にしたことがある…

vol.36 11年ぶりのアップデート! PHP7の導入方法

こんにちは。Webエンジニアの毛利です。 2015年12月4日、プログラミング言語のPHP7がリリースししました。 メジャーバージョンが更新されるのは実に11年ぶりとなるPHP7。 大きな改修となるメジャーバージョンのアップデートではプログラムの骨組みから見直さ…

vol.35 2016年申年の年賀状に使いたい紙、10選

こんにちは。アートディレクターの中野です。今年も残すところ、あとわずか。街を歩けば軽快なクリスマスソングが聞こえる季節になりました。さらに自宅に帰ってTVをつけると、チキンやケーキの映像に混ざって、早くも年賀状のCMがながれています。ほんとう…

vol.34 SVG形式の基本的な書き出し、注意点、軽量化、表示速度

こんにちは。イラストレーターの西山です。今回はSVGについて基本的な書き出し方や使う時の注意点をご紹介します。SVG(スケーラブル・ベクター・グラフィックスの略)はIllustratorで作成したようなベクター画像を表示する画像フォーマットです。はっきりと…

vol.33 ペドロ・アルモドバルの映像色彩美

こんにちは。デザイナーの寺田です。みなさんペドロ・アルモドバルという映画監督をご存知ですか?スペインの巨匠とよばれるペドロ・アルモドバルの作品はオフィスにたくさん置いてあります。映像のワンシーンワンシーンが、写真を切り取ったようでとても印…

vol.32 GitHub Desktopを使ってみよう

プロジェクトのバージョン管理に利用するGitHubですが、ついこの間、デスクトップアプリケーションがアップデートされていました。いつものようにアップデートをかけると、アプリケーションの名前が変わっています。アプリケーションの名前が変わるほどの大…

vol.31 ajaxでページを快適なものに(前編)

こんにちは。Webエンジニアの毛利です。Webページにjavascriptの機能を実装することが多くなっています。今回は意外と身近なサービスで、それと知らずに使っている「ajax」について 解説します。 ajax「エイジャックス」とは 「a」……Asynchronous(非同期)…

vol.30 CSS3のキーフレームでアニメーションをつくる

こんにちは、デザイナーの菅野です。サイトにアニメーションをつかうことによって、さまざまなインタラクションが 加えられ、表現をよりリッチにすることができます。 今回は、CSS3から使用できるようになったキーフレームをつかった アニメーションについて…

vol.29 photoshopでGIFアニメを作る

こんにちは。イラストレーターの西山です。イラストを描いていると一度は思いえがくアニメーション。しかしアニメを作る専用ソフトを買ったり、画像を大量に描いたり、なんとなく難しそうで作ったことがないという人も多いと思います。 実はphotoshopひとつ…

vol.28 よりよい睡眠で寝起きの良い朝を!

今回は睡眠と寝起きのよい朝についてのお話です。寝ているあいだは時間の意識はありませんが、じつは睡眠の時間は仕事のつぎに長いのです。 人生の3分の1は眠っている vol.15「1日には24時間しかない?」でお話した1日の円グラフでは睡眠は、24時間のうち3…

vol.27 自由にデザイン!Tumblrのカスタマイズ方法

こんにちは。デザイナーの寺田です。 SNS(ソーシャルネットワーキングサービス)は世界中で利用されています。 最近では、宣伝のためにSNSを利用する企業が増えています。 当社もTumblrを利用し、自社コンテンツの宣伝やオフィスの雰囲気が伝わるよう社内で…

vol.26 知って得する?!フランス旅行が倍楽しくなるフランスの伝統色

こんにちは、デザイナーの菅野です。 さんぽが気持ちのよい季節になってきましたね。東京の桜もちらほらと咲いているようです。 さて、今回はフランスの伝統色についてお話しします。 突然ですが、フランスの伝統色が使われているものといえば何が思いうかび…

vol.25 あなたもできるWebサイトのパフォーマンステストと脆弱性テスト

こんにちは。エンジニアの金村です。 今回は、Webサイトを作る上で重要な「パフォーマンステスト」と、「脆弱性テスト」についてお話します。 パフォーマンステストとは、Webサイトの運用が始まったとき、負荷によりサーバーが落ちるといったトラブルを未然…

vol.24 HTML+CSS3で軽快アニメーション!Web制作にGPU処理を

こんにちは。Webエンジニアの毛利です。 今回はWebページ制作で軽快なアニメーション表現をしよう!がテーマです。 CSS3が本格的に浸透し始め、Webページにアニメーションを取り入れたい!とかんがえる場面も多くなりました。 CSS3を用い、アニメーションを…

vol.23 レタッチで覚えておきたい ペンタブでできる写真補正

こんにちは。イラストレーターの西山です。 今回は、レタッチでも便利なペンタブの使い方についてお話しします。 ペンタブというとイラスト作成に使うものだとおもわれがちですが、写真画像をレタッチする際にもペンタブは使います。それではレタッチ作業で…

vol.22 Webサイトを圧倒的におしゃれにするGoogle web fontsの使い方

こんにちは。デザイナーの寺田です。 最近Webフォントサービスが徐々に増えてきました。 BOEL Inc.のWebサイトでも、Google web fontsの「Noto sans Japanese」を使っています。 Webフォントは、CSS3というhtmlの新しい規格から策定され、Webサーバー上から…

vol.21 日本古来より伝わる色。美しい伝統色の魅力。

はじめまして、デザイナーの菅野です。 今回は、和の色、日本の伝統色がテーマです。四季折々の自然の変化に富む日本。そんな四季のうつろいの中に美を見い出し、生まれたのが日本の伝統色です。 その長い歴史の中で、植物や生物、染料、その時代の文化など…

vol.20 忘れがちな時間管理…スグに実践できるタスク管理法

前回のvol.15「1日には24時間しかない?」では睡眠・仕事・プライベートにそれぞれ8時間、「1日合計24時間!」をお話ししました。 ところで「毎日仕事が毎日8時間で終わらせる」のはなかなか難しいときがありませんか? 仕事が増えるにつれ、プライベートや睡…

vol.19 デジタルイラストにおけるテクスチャの作り方

こんにちは。イラストレーターの西山です。 今までphotoshopでの手書き風イラストでは、アプリケーション自体の機能を多く使用してきました。 しかし、より質感を出すために本物の紙や絵の具の塗りムラを使う場合もあります。 素材はネットでも多く配布され…

vol.18 どう選ぶ?「オフセット印刷」と「オンデマンド印刷」

こんにちは。アートディレクターの中野です。ペーパーレス時代がやってくると予言されてから、早十余年が経ちました。 現状は、その予言どおり大半がデジタルに置き換わっていますが、 いまだ印刷物の存在感を無視することはできず、一定のニーズを誇ってい…

vol.17 ユーザーを魅了するパララックスサイト

こんにちは。デザイナーの寺田です。 今回は、パララックスサイトについてお話しします。 パララックスがWebデザイントレンドの1つになってから2〜3年経ち、パララックスサイトは一般的なものとなってきました。 アイデア次第でユーザーの感覚を刺激する魅力…

vol.16 えんぴつ風ブラシの作り方

こんにちは。イラストレーターの西山です。 前回のvol.4 使い方いろいろ!オリジナル筆圧ブラシの作り方ではPhotoshopの基本的な筆圧ブラシの作り方をご紹介しました。 今回はそれを応用してえんぴつ風ブラシを実際に作ってみましょう。えんぴつ風ブラシがあ…

vol.15 1日には24時間しかない?

こんにちは。今回は「時間」についてお話しします。 1. 1日には24時間しかない? いまあらためて認識しておきたい時間配分のこと 「1日24時間!」。 えっ?て顔をしてませんか?ほとんどの人はそうなのです。あたりまえすぎるので考えたこともないかもしれま…

vol.14レスポンシブWebサイトの高速化

こんにちは。デザイナーの寺田です。TIPS vol.13「レスポンシブWebデザインをオススメする理由」に引き続き、今回はレスポンシブWebサイトの高速化についてお話しします。レスポンシブWebサイトは、表示速度がPCでは気にならなくても、スマートフォンで見る…

vol.13 レスポンシブWebデザインをオススメする理由

こんにちは。デザイナーの寺田です。 当社のサイトはレスポンシブWebデザインで作っています。レスポンシブWebデザインとは「様々な機器や画面サイズに合わせ、デバイスが変わってもひとつのソースで対応する」ことをいいます。ソースがひとつなので、今まで…

vol.12 動画制作の流れ Adobe After Effects Pro編

vol.10 動画の作り方 Adobe Premiere 編に引き続き、映像を作るときに使用するアプリケーションAdobe After Effectsについてお話しします。こちらもPremiere同様、Adobeソフトの画像系のアプリケーションとは使い方が違いますが、Premiereと基本的には似てい…

vol.11 デザインに必須!?ロゴ作成で気にしたい3つのこと

デザイナーの寺田です。 本日はグラフィックデザイナーの視点からロゴについてお話します。 ブランドアイデンディティには欠かせないロゴマーク。一見簡単そうなグラフィックデザインのように見えるロゴでも、企業や、商品サービスのブランドメッセージを視…

vol.10 動画の作り方 Adobe Premiere Pro編

ディレクターの白子です。 本日は映像を作るときに使用するアプリケーションAdobe Premiereについてお話しします。当たり前ですが、Adobeソフトの画像系のアプリケーションとは使い方が違って、使い始めの頃はとても使いづらかったのを覚えています。 今回は…