構造化データをお手軽に データハイライターを使ってみよう

検索エンジンの最適化において、SEOの対策は欠かせないものとなっています。 サイト集客の方法はスマートフォンの普及、SNSの一般化など様々な要因から多様化しています。 最新の傾向としてはデータ最適化をするだけでは十分とはいえず、コンテンツの内容・…

vol.73 3DソフトBlender入門

こんにちは。デザイナーの寺田です。 デザインの表現で3Dによるものが、一般的になってきました。 以前、Photoshopによる3D MODELING「を紹介しましたが、 今回は「Blender」による3Dモデリングの作成方法をご紹介します。 そもそもBlenderとは? Blenderは…

vol.72 夏を感じさせるデザインのポイント10選

こんにちは。デザイナーの野中です。7月も後半に入り、今年も夏本番の季節になりました。今回の記事では、この季節に多く目にする夏を感じさせるグラフィックデザインの要素とは何か、実際の事例をまじえながらご紹介します。 ※紹介する事例の引用元サイトは…

vol.71 srcsetで画像をレスポンシブやRetinaディスプレイに最適化

こんにちは、Webエンジニアの佐藤です。Web上で、ウィンドウサイズが変わった場合やRetinaディスプレイなどの高解像度の場合、その状況に対応した画像に自由に切り替えることができるsrcset。今回は、画面解像度やウィンドウサイズによって最適な画像に切り…

vol.70 映画にみる色使いのこだわり

みなさんは映画をよくご覧になりますか?チケット代が高い、映画選びを失敗したくないなどありますが、TVドラマとは違い、監督の色・こだわりがよく見えるのは映画のよいところだと思っています。 今回は数多ある映画の中で色彩が印象深いものをセレクトしま…

vol.69 2017年度版 Webデザイン・UIのトレンド10選

こんにちは。デザイナーの野中です。 6月も今日で終わり、早くも2017年の後半が始まりました。 Webの世界では、2016年はユーザーの操作にさりげなく感覚的に応えるマイクロインタラクションや、動画を全画面に採用したWebサイトが主流になり、目で見るだけで…

vol.68 常時SSL化のススメ Let's EncryptでWebサイトを暗号化

モバイルを中心にインターネットに接続できる機器の飛躍的な増加により、多くの人がインターネットから情報を取得するようになりました。 利用者母数の圧倒的増加によって、ユーザーを狙った悪意ある攻撃などが激化する中、それらの攻撃からユーザーを保護す…

東京オリンピックで活躍。 ピクトグラムについて。

こんにちは。デザイナーの寺田です。みなさんは、はじめて来たデパートで、トイレに行きたくなったとき どうやってトイレを見つけますか。 また、海外旅行で国外のデパートだったらどうするでしょうか。店員さんに聞くこともあると思います。天井に吊るされ…

vol.66 Flexboxの仕様と柔軟なボックスレイアウト

こんにちは、Webエンジニアの佐藤です。Webサイトのコーディングで常に頭を悩ませているのが、上下中央揃えや、要素の高さを合わせるなどのボックスレイアウト。単純そうにみえて一筋縄ではいかなかったレイアウトを「Flexbox」の導入で解決しようという方が…

vol.65 オフィスで使う印刷紙 企画書に最適な用紙とは!?

みなさんはオフィスで印刷するとき、どんな紙を使っていますか?ふだん何気なく使っている紙は、実は紙の種類で印象も触り心地も変わってきます。 今回オフィスで使う印刷紙、とくに企画書を印刷する際はどのコピー用紙が最適なのか比較してみました。 オフ…

vol.64 これでもうアイコンがにじまない!SVGのデータ作成で気をつけるポイント

こんにちは、デザイナーの野中です。みなさんはデザインしたアイコンをブラウザ上で見た時にアイコンがぼやけたりにじんで表示されてしまった、という経験がありませんか?下の図でも、imageAははっきり表示されていますが、imageBはぼやけています。 image …

vol.63 node.jsアプリをLinuxサーバーで公開してみよう

前回のnode.jsに触れてみよう サーバーサイドJSとはに引き続き、node.jsをサーバー上で動かします。 ひとまずnode.jsを動作させてみたい、と思い前回のTIPSで紹介したフレームワーク「Express」をnode.jsと一緒にインストールし設定、構築します。 現在動作…

vol.62 企画発想のコツ

こんにちは、デザイナーの寺田です。AI(人工知能)や技術の進歩により、わたしたちの働き方は日々変わりつつあります。現在の働き方では、就業者の49%がAIに変わってしまうともいわれています。 雑誌や書籍でもAIについての特集や本が増え、さまざまな業種…

vol.61 CSS肥大化を抑える Sassを使ったコード設計の実践

こんにちは、Webエンジニアの佐藤です。 前回は CSS肥大化を抑える 破綻しないコード設計とSassの導入についてご紹介しました。 今回は、私が業務で使っているCoda2でのSassのインストール・コンパイル方法と、 また前回を踏まえて、実際に業務での実践で意…

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を用い、アニメーションを…