お初にお目にかかります。関西から参りました、シエロと申します。 8月からLIGにジョインし、現在Webディレクターをしています。 東京は暑いなあと思っていたら、もう冬が目前です……。月日が立つのは早いですね。 秋の東京といえば、デザイン関連イベントが開催される季節のイメージです。 その中でも毎年秋になったらチェックしているのが「グッドデザイン賞」というデザインアワード。ありとあらゆるジャンルのデザインが集う中から、その年のデザインの傾向を見るのが好きです。 グッドデザイン賞は時代を反映するアワードの側面もあると思います。そこで今回は2018年のグッドデザイン賞では、どれだけのWebサービスが受賞しているのか気になったので調べてみました。 そもそもグッドデザイン賞とは 約10年前、京都の山奥でプロダクトデザインを勉強しておりました（まぁこれで年齢がバレますね）。 学生時代に夜行バスで眠たい目

こんにちは、マネージャーのJackです。 今回は、Microsoftが公開している無料で利用できるエディタ「Visual Studio Code（以下、VSCode）」のプラグインに関してお話できればと思います。 Visual Studio Codeとは？ VSCodeとは、Microsoftによって開発されたソースコードエディタです。Gitクライアントの統合や、シンタックスハイライトなど、プログラミングをする上で必要な機能が一通り揃っているエディタです。Windows、Linux、macOS上で動作するのも便利ですよね。 ▼詳細はこちら https://code.visualstudio.com/ 便利なプラグイン5選 では、さっそくプラグインを紹介していきます。 1. vscode-icons 各ファイルの拡張子を判別し、アイコン化してくれるプラグインです。 ファイル数が増えた場合、ど

どうもZIMAです。 本日はお馴染みのサイトマップについてお話させていただこうと思います。 さっそくですが、ひと昔前のサイトマップのイメージってどんなものでしょうか？ ユーザーが使うためにあったイメージですよね。どんなにわかりづらいサイトでも、サイトマップページへ行けば一発で目的のページへリンクできる、とても便利で重要なページだったと思います。 でも、「いまはTOPからどこにでもいけるから、サイトマップなんて必要ないんじゃない？」、そう思う人も多いはず……。ところがどっこい、サイトマップはユーザーだけじゃなく、SEO対策においても重要な存在なのです！ なくてはならない存在、サイトマップ みなさんが知っているサイトマップって、きっとフッターやヘッダーにあって、1ページのなかにサイト全体のページがリスト状に並んでいるイメージですよね。当然、わかりやすくて便利なわけです。 けれど「サイトマップ」

みなさんこんにちは！セブチームでWebディレクターをしているしゅん（左）です。 今回は7月13日（金）の夜に開催されたWebディレクターの交流イベント「スナックちゃんれみ」の様子をレポートしていきます。 初開催だったにも関わらず30名もの参加者を集めた本イベント。 Webディレクターの方、なりたい方、ちょっとでも興味がある方、必見です！ スナックちゃんれみとは？ Webディレクターのちゃんれみと、デザイナーの藤田が、参加者の皆さまから事前にいただいた質問や疑問について、お酒を飲みつつ「しっとり」お話しする会です。 会場についた方から順にお酒を飲み始めて、第1部ではちゃんれみママと藤田店長の話をゆるく聞き、第2部ではゆるーく懇親会が始まり多くの人と交流する、といったとてもゆるいイベントとなっています。 今回募集したテーマは「Webディレクションや日々の働き方についての疑問」。 それではさっそ

最近のマイブームは「マジ卍」、フロントエンドエンジニアのザワです。 言葉の流行と同じように、サイトの演出方法にも流行があります。 毎年、何かしらセンセーショナルだったり、もしくは過去の演出を踏襲しながらも新しいエッセンスを加えたような演出が流行していますよね。新しい流行がチラチラと顔を見せはじめると、ワクワクします。 今回はそんな流行の演出方法を、「マジ卍」なサイトとともにご紹介していきたいと思います（私の「マジ卍」は、最高を意味します）！ カスタムしたマウスカーソル https://themads.agency/ ※現在はアクセスできません。 マウスカーソルを利用した演出は最近の流行の中心となっています。 「魅せる」ためだけではなく、ユーザ視点でも使いやすい、ナビゲーションの一部として役割を果たしているものが多いです。 スクロールアニメーションをはじめとして、これまでのウェブサイトの演出

ワイヤーフレーム作成、プロトタイプ、共有までを一元化！ Webディレクションの現場に革命を起こした「Adobe XD」の魅力とは こんにちは、Webディレクターのちゃんれみです！ 突然ですが、みなさんは「Webサイトのワイヤーフレーム作成」ってどのように進めていますか？  どの職種の人がどんなツールを使って作成するかって、会社やチームによって様々なんじゃないかと思います。 LIGの場合、デザイナー or Webディレクターが協力しながら作成することが多いです。 以前、Webディレクターユニットで「ワイヤーフレーム作成って、どのツールを使っていますか？」というアンケートをとったところ、こんな結果になりました。 LIGのWebディレクター陣がワイヤーフレーム作成に使っているツールのアンケート結果 なんと、まだ2017年10月に正式版がリリースされたばかりの「Adobe XD」がダントツの1位！

やっとかめだなも！ 名古屋出身のディレクター、ちゃんれみだがね！ ついに名古屋禁止令を出されたので、真面目にWebの記事を書きたいと思います。 今回は「Webディレクターなら使いこなせなかんよ（かんよ＝名古屋弁で『ダメだよ』）！」と聞いたGoogleデータスタジオのご紹介です。 2019年7月3日追記 日本でのデータスタジオの名称は、「データポータル」に変更となったため、タイトルを変更しています。参考サイト：データポータルへようこそ – データポータルのヘルプ Google データスタジオとは カンタンに説明すると「さまざまなデータを可視化するBIツール」です。BIとはBusiness Intelligenceの略で、企業が持つデータを経営に役立つ方法として有効活用することを指します。 つまり、Googleアナリティクスなどで取得したデータをグラフや図版などでわかりやすく可視化し、サイトや

「Laravel」でReactデビューしてみよう！ Laravel + Reactのセットアップ Laradock などで「 Laravel 」をセットアップしてください。 ブラウザで http://localhost にアクセスすると、Laravelの初期画面が出るようになっている状態から始めます。 この状態では、Bootstrap + Vue.js が利用できるようにセットアップされています。 これを React に変更します。 （ workspace コンテナ内） $ php artisan react React scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. 自前でセットアップしたい場合は、下記のコマンドでフ

迅速なコンテンツ更新のために、WordPressやMovable Typeなどの「CMS」を使ってサイト構築をすることはもはや定番です。そこから一歩進んだ「マーケティング機能付きCMS」はご存知でしょうか？ CMSはとても便利ですが、ビジネス活用するとしたら顧客分析やリピート施策、コンテンツ最適化などのWebマーケティング機能が必要不可欠。 今回はそんな「マーケティング機能付きCMS」の紹介と、CMSと連携させたいマーケティングオートメーションをご紹介します。 マーケティング機能付きCMSとは？ 「マーケティング機能付きCMS」について、まず「CMS」の概要からおさらいします。 そもそもCMSとは？ 「CMS」はコンテンツ・マネジメント・システムの略で、サイト制作の知識がなくてもWebサイトのコンテンツを作成・管理できるシステムのことです。 CMSを導入すれば誰でもカンタンにサイトの更新が

こんにちはディレクターのともぞうです！ 毎年毎年「地球温暖化って嘘だろ……？」って思うくらいに寒いです。 サイト制作が進み後半へ進んだところで、 「あれ？ これってどういう仕様なんだろう？」 というのが出てきたりしませんか？ いわゆる考慮漏れや定義漏れというやつです。 これを少しでも防ぐために画面仕様書を作成することがあります。 今回はその画面仕様書について書いていきます。 画面仕様書のすゝめ 画面仕様書とは？ まず「画面仕様書とは？」というところからはじめましょう。 画面仕様書は各画面の要素や機能、画面遷移などを記述するものです。 Web サイト制作では欠かせないもののひとつだと思います。 画面仕様書の必要性 画面仕様書には、下記の必要性があります。 クライアントやプロジェクトメンバーとの認識を合わせるため テストを書くため それぞれ少し細かく説明していきます。 クライアントやプロジェク

実際にAPIを叩いてみて 今回は、すべてのリスト情報を取得する PHP スクリプトを書いて検証してみます。 本スクリプトを動かす前に、管理画面上で、API キーを発行します。 また、CURLOPT_URL で指定する URL に関しても、指定されたリージョンの URL を利用する必要があります。 ソースコードは下記のとおりです。 <? $api_key = 'APIキーを指定'; $request_type = 'GET'; $ch = curl_init(); $headers = array( 'Content-Type: application/json', 'Authorization: Basic ' . base64_encode('user:' . $api_key) ); curl_setopt_array($ch, [ CURLOPT_URL => 'https://us

こんにちは、マーケターのきょうへいです。 ぼくは、ふだん広告バナーや、背景ジャックの制作管理をしているんですが、その数、月に約 20 件。 他にも、メルマガ配信や記事解析のタスクもあるので、正直いっぱいいっぱいなところ……。「働き方改革」の波にのっていきたいのは山々ですが、あれこれ考えているうちに、次々と案件が積み重なっていく日々です。 特に立て込んでいるときに、こんな連絡があると…… 「工程管理がもっとしっかりできれていれば……！」と思わずにはいられません。 そんなぼくに、今回制作管理を効率化してくれるツール「 AdFlow 」の PR のお話が舞い込んできました。使ってみると、これまで 1 案件に 3 時間かかっていた業務が 1 時間に短縮できたんです！ 「AdFlow」が可能にしてくれた6つのこと 作業時間を 1 / 3 にしてくれた AdFlow は、クリエイターズマッチ社が提供す

こんにちは、フロントエンドエンジニアのライダーです。 新卒で入社し、早いもので半年が過ぎました。最近のプライベートフロントエンド事情は、React Nativeでのネイティブアプリ開発。早くApp Storeにリリースしたいです。 さて、Web制作をはじめとしたクリエイティブな仕事に就いている人、就こうとしている人、趣味にしている人は、macOSを搭載したPC……つまりMacbook 等を使っている人が多いですよね。 ところでそのMac、使いこなしていますか？ 先行投資とはいえ、Macbookの購入は決して安い買い物ではありませんよね。そこで、その真価を引き出すためのmacOSとその標準アプリケーションの便利な機能や、設定をご紹介します！ 置換も接頭辞もお手のもの！ ファイル名を一括変更 知ってましたか？ 実は、ファイル名、一括変更できるんです💪 手順は下記。 Finderで、変更を加え

こんにちは、エリカです。 Laravel をさらっと使って、カンタンなお問い合わせフォームを作ってみます。 環境は、Laradock + Laravel です。前回の記事を参考にセットアップしてください Laravel ではもはや Model という言葉があまり出てこないのですが、便宜的におなじみ MVC な感じで進めていきます。 お問い合わせ用モデルクラスの作成 今回はデータベース抜きで話を進めますが、まずは「お問い合わせ」というモデルクラスを作ります。したがって、ビューやコントローラでは、この「お問い合わせ」というモデルを主に取り扱います。 また、今回は言語設定も省いていますので、全て英語で処理していきます。後ほど、日本語の対応方法なども紹介していければと思います。 というわけで「 Contact 」という名前でモデルを作ります。 まずは、各種 docker コンテナを起動してください

こんにちは。フロントエンドエンジニアのほりでーです。 CDN（シー・ディー・エヌ）という種類のWebのサービスをご存知でしょうか？　インフラの知識がある方にとってはお馴染ですが、デザインやフロントエンド中心の方にはあまり馴染みのないサービスかもしれません。実は、これから紹介するCloudFlare（クラウド・フレア）というCDNサービスを導入すると…… Webサイトにほとんど手を加えることなく大幅に高速化 無料でSSLに対応 DDoS攻撃のような有害なアクセスをブロック させることが可能なのです。今回は私が運用している静的なブログサイトを例に、CDNやリバースプロキシの仕組み、CloudFlareの導入方法などについてご紹介します。 CDNとは CDNとはコンテンツ・デリバリー・ネットワーク(Content Delivery Network)の略称です。 「コンテンツを届けるネットワーク」

こんにちは！　ディレクターのちゃんれみです。 みなさんは、Web制作でどんなツールを愛用していますか？　デザインツールだけでもPhotoshop、Sketch、かつてのFireworksなど、職種だけでなく、人によって使うツールはさまざまです。たくさんあるツールの中で他の人がどんなものを使っているか、気になりませんか？ 今回はLIGのWebディレクター・ちゃんれみが日頃から愛用しているツールを紹介します。 Webディレクションに欠かせない定番ツールを集めたので、ぜひ参考にしてみてくださいね。 スケジュール・タスク管理 1.Redmine オープンソースのタスク管理ツールです。 「チケット」と呼ばれるタスクを登録し、期限や担当者を設定したり、ガントチャートでスケジュールの管理をしたり、これがなくてはディレクション業務は成り立ちません！ ちなみにLIGではWeb事業部全体でRedmineを使用

はじめまして、デザイナーのヴィクトリアです。 わたしが日々の業務でやらせてもらう機会の多い「下層ページのデザイン」。下層ページのデザインとは、主に先輩デザイナーが作成したトップページのデザインをもとに、文字どおり下層ページを作成すること。ページ数の多いサイトではよく手分けをして作業しますね。トップページのデザインを渡されたらまず、デザインをじっくり見て確認します。ここの考査を怠ると、下層ページが全然違うページに仕上がり修正の嵐になるわけです。 今回は、そうならないために気をつけたいポイントを備忘録としてまとめました。当たり前のことばかりですが、忘れないように気をつけたいです！ 確認するポイント 1. サイトの目的 下層ページから案件に入るときにまずおこなうことは、トップのデザインがどういう経緯でできあがったのかを知ることです。この経緯を知らないと、もとのデザインの意図とずれてしまい、戻しが

こんにちは、しょごたんです。 ニーアオートマタ、くっそ面白いですね。 前作のニーアレプリカントも最高でしたけど、今回も最高です。 2B が可愛すぎてしかたがない、尊い。 さて、大学を卒業して地元の IT 企業に転がり込んでから 10 年近く経っちまいました。エンジニア 10 周年記念ですよ、10 周年。 振り返りも兼ねてウチが開発する上で心がけてるポイントを並べて見ようかと思います。 クライアントの身になって自分の意思も据える 設計を行う際にどのような機能が必要かを考えるわけですが、 その際に実際扱うクライアントがどのようにしたら扱いやすいかを一番に考慮します。当たり前なことではあるんですけど、その辺を加味せずに作るとクライアントからしたら扱いづらいものになってしまい、クライアントで扱いきれず費用をかけてもそのまま放置、そして他でリニューアル……となってしまい、もったいないです。 そのため

こんにちは、デザイナーのまきこです。つばきファクトリーでは、りさまる推しです！ さて、みなさんがデザインを担当するWebサイトで、文言をつくるのは誰ですか？　Web業界では今のところ、「ディレクターがざっくりとした文言のアウトラインを考え、くわしい文言はお客さまに支給していただく」というやり方が一般的ですよね。 でもわたしは、この現状をいつもちょっと残念に感じています。サイトの目的を叶えるための機能を担う要素として、言葉もビジュアルと同じくらい大切で、機能する言葉を考えるのは、デザインと同じかそれ以上に専門的なスキルが必要なことだと思うんです。それをすべてのお客さまにお願いするのは無理がありますし、その結果として機能しない文言になってしまったら、それは制作側にとってもお客さまにとってもユーザーにとっても残念な結果ですよね。 デザイナーあるあるでいうなら、「仮の文言を使っていい感じにレイアウ

ReactでもHttpInterceptorをやりたい ~RxJSを使ってAjax通信のエラーハンドリングを一箇所にまとめる~ こんにちは、担当しているWebアプリ開発案件も佳境にはいり若干疲弊気味のフロントエンドエンジニアのいなばです （レッドブルほしい）。 jQuery.ajaxを使用しないケース（SPAなど）で頻繁にAjax通信を行う際、通信エラー時の制御を、リクエストを飛ばす箇所ごとに記述するのは面倒ですよね。 そこで今回は、Ajax通信のエラー時の制御を一括で制御する仕組み（HttpInterceptor）が欲しいなと思って調べてみました。 ちなみにjQuery.ajaxの場合は、仕組みが用意されているのでとても簡単です。 http://stackoverflow.com/questions/36549308/global-ajaxerror-event-before-local