はてなブックマーク

誰も怒らないなら、ダイレクトお鍋（鍋から直接料理を食べてしまう）をしてしまう コーダー兼ズボラの小宮山です。 今回は自作ツールの紹介とその記録です。 玄人感はないので、あしからずご了承ください。 ご指摘のポイントたくさんあるかとは思いますが、楽しく作ったんだと感じてもらえれば嬉しいです。 ※すぐにツールを使いたい方は、こちらのアンカーリンクから読んでください。 ある日ふいにきたミッション きっかけの２択 ある日の忙しい１日ことです。 「40ページくらいサイト内の情報をページごとにエクセルデータにまとめたい」 というミッションを部内のディレクターから託されました。 ズボラな僕は、この作業がコンパクトに終わる最善の方法を考えはじめます。 そこで、最初に、Webでいろいろと検索し、すでに有益な情報をあげてくださっているみなさんのお力を借りることに。 情報をまとめてエクセルで出すツールはないだろう

こんにちは。コーディングファクトリー部（以下CF部）コーダーの仲山です。 今日はデザイナーとコーダーの間の摩擦が起きがちなコミュニケーションを圧倒的にスムーズにし、且つマークアップを爆速にしてくれるデザイン共有ツール、Zeplinについてです。 最近は案件で使う機会が増えてきましたので、コーダー側からみたおすすめポイントを紹介したいと思います。 Zeplinとは Zeplinはデザイナーさんが Photoshop、sketch、adobeXD で制作したデザインを、コーダーに共有するためのツールです。2015年にローンチされて2017年には airbnb や slack、pinterest といった有名どころも使っており、ユーザーは増え続けています。 コーダーは Zeplin でデザインを受け取ることにより、画像のアセットが簡単になり、各要素の距離や CSS のカラーといった情報をすぐに確

こんにちは、ディレクターの中川です。 去年、議事録から学ぶディレクションスキルという記事を書かせて頂きましたが、案件の窓口に立つディレクターにとって、議事録は切っても切れない必須ツールのひとつです。今回、案件を進めていく中で、今までとは違った議事録の書き方、使い方を学ぶことができたので、改めて新しい議事録の書き方をご紹介したいと思います。 これまでの議事録のメリット、デメリット。 ディレクターとして仕事を進める中で、工数が大きかった作業のひとつが議事録の作成でした。会議の中でメモを取り、会議後直ぐに作成しないと細かい会議の内容を忘れてしまったりするため、迅速な作成が必要になります。 今までの議事録はWordファイルに、以下のように議題毎に表形式で書く形のものでした。 これまで使っていた議事録のフォーマット 表形式にまとまっているので見やすくドキュメントとしての精度も高いのですが、文章やレイ

こんにちは。デザイン部部長の小野木です。 昨年プレビュー版としてリリースされた、Adobe XD（ Adobe Experience Design ）。現在（2017年3月現在）ではバージョンアップされて、さらに使いやすくなっています。 Adobe XD とはモックアップ・プロトタイプのデザインを素早くつくることのできるアプリケーション。とても動作が軽く直感的で、今後 Webデザインや UI/UXデザインの主流になるであろうツールだと感じています。 機能や詳しい使い方については、公式ページや他のブログなどでも紹介しておりますので、今回は実際の案件で導入によるメリットと注意点についてお伝えしたいと思います。 Adobe XDを使うことになった経緯 以前からデザイン部では、デザインやモックアップをより効率的に作る方法がないか探していました。レスポンシブデザインが主流になった今、Webデザインに

こんにちは、ディレクターの大藪です。 Webサイト制作において、ディレクターはプロジェクト開始から公開まで全ての工程で関わっていくのですが、今回はデザインができるまでの工程についてお話ししたいと思います。 デザインを作ると言っても、白紙の状態からいきなりデザイナーが制作を開始するわけではありません。 デザイン作成前にいくつかの工程を踏み、準備を行う必要があります。 デザイン作成前の下準備 どんなページが必要か、ページに掲載する内容など、作成するWebサイトによって様々です。 まずは作成するWebサイトの全体像を捉えつつ、事前に用意すべきものを決め、上流工程の部分を進めていきます。 1, サイトマップの作成 サイトのページ数、ページカテゴリを決め、主要な下層ページは何になるかなど、サイト全ページをサイトマップにまとめていきます。 制作途中で「ページが足りない！」なんてことが起きてしまうと、デ

2015年12月07日 ::before,::after擬似要素を使って、 よくあるパターンをつくってみよう。 コーダーのあーだこーだ こんにちは。 コーディングファクトリー部　コーダーの丸山です。 このコーナーでは、コーディングファクトリーの仕事のスタイルや、深堀りしたコーディング技術をメインにお伝えしていきたいと思っています。また、コーダーが各々のコーディング論を語る座談会なども企画してますのでお楽しみに！ 今回は私がこの要素を知ってから（コーディングの）世界観が変わった！というCSSの要素の一つである『::before,::after擬似要素』の特徴とコーディング例をご紹介します。 ::before,::after擬似要素とは 擬似要素（pseudo elements）は、W3Cによると"文書言語(HTML)に記された以上の抽象概念や情報を与えるもの"とされています。::before