Figmaのコンポーネントプロパティ入門 - カスタマイズ可能なコンポーネントの作成 - ICS MEDIA
Adobeによる買収の意向表明が大きな話題となり、世界的に注目されているデザインツール「Figma」。そのようなビックニュースの裏でも、新たな機能がどんどん追加されています。 今回の記事では、コンポーネントにおけるカスタマイズ可能な箇所を管理しやすくし、コードとの整合性を高めてくれる「コンポーネントプロパティ（Component properties）」を紹介します。 コンポーネントプロパティは、コンポーネント（Components）やバリアント（Variants）と言った事前知識が必要な一歩進んだ機能になります。まずは、以下の記事の内容を理解してから本記事を読むことをオススメします。 デザインの管理と効率化が行えるFigmaのComponents入門 FigmaのVariants入門 - さらにコンポーネントを使いこなそう Figma公式の「コンポーネントプロパティ」のチュートリアル用デ
フォルダに放り投げてしまっていませんか？Webディレクターの適切な素材データ管理方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト用素材データを送受信する際にこんなこと思い当たりませんか？ 素材をフォルダに放り投げてしまい、必要なときに探しづらくなってしまっている とりあえず手元にあるデータを送って終了にしてしまっている お客様とのやり取りは丁寧にするけれど、社内のデータ管理は同じように丁寧にできていない どの素材を送ったかよくわからなくなってしまうことが多々ある 今日こそはフォルダやデータを整理しようと思っているけれど、いっこうにその日が来ない 個人のスマホで撮影した写真データであれば、日付抽出、お気に入り、撮影地など自動で振り分けされ、ファイル名を気にする事は日常ほぼありません。 でも、Webディレクターの仕事の現場では、画像データやテキストなどあらゆるデータをお客様から受領し、デザイナー・エンジニアが使いやすいよう整理、ファイル形式変更、リネームして渡すという場面が多く見られます。 ルールが揃ってい
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
Adobe XDでスマホとデスクトップのプロトタイプを同時に管理できる！最新機能マルチフローとは - ICS MEDIA
Adobe XDの2020年8月のアップデートでは、「マルチフロー」が搭載されました。 「マルチフロー」とは、複数のプロトタイプのフローを設定できる機能です。プロトタイプを理由に、デスクトップとスマートフォンのデザインを別々のファイルで管理する必要がなくなる他、ユーザーの流入経路による表示切り替えなどもプロトタイプしやすくなります。 プロトタイプがさらに簡単で管理しやすい機能になりますので、デザイナー・ディレクターにはとても嬉しい機能です！それでは、「マルチフロー」の使い方と注意点を紹介します。 マルチフローとは 前述の通り、マルチフローとは1つのファイル内で複数のプロトタイプのフローを設定できる機能です。 今までのXDでは1ファイルの中で管理できるプロトタイプのフローは1つでした。そのため、デスクトップとタブレット、スマートフォンのデザインを同じファイルで作っていると共有リンクの作成や更
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
Googleカレンダーユーザーは知っておくべき神ワザ！ひとつ上のタスク管理術 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Web事業部マネージャーのさささん（さっさん）です。 今回は職種関係なくビジネスパーソンのみなさんに読んでもらいたいネタを提供したいと思います。 さて、毎日仕事をされているみなさんは自分のタスク（業務）をどのように管理していますか？ プロジェクトであればもちろんプロジェクト管理ツールを使ってタスクを細分化してタスクの一つひとつを管理していると思います。 でもそのタスクって、だいたい開始日と終了日（期日）が設定されているもので、実際いつやるのか（何時から何時までにやるのか）まではなかなか管理されていないのではないでしょうか？ 「いつやるのか」を明確にするために、ひとつヒントがあります。 それはカレンダーツールを活用することです。 ということで、今回はカレンダーを使ったタスク管理について紹介いたします。 カレンダーを使ってタスクを管理しよう では実際に、どのようにカレンダーのツール
管理画面で設定できる！GoogleタグマネージャでGoogleアナリティクスを一元管理！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、なっちゃんです。 少し前になるのですが、6月にWeb制作の実績紹介サイト「LIG WORKS」を新しくリリースしました！ このプロジェクトは必要最低限の機能とページ数でスタートしたものなので、まだまだ完成ではございません。今後、もっともっと魅力的な実績サイトにしていくために、改善を加えていく予定です。 新しくサイトを立ち上げたとき、アクセス解析はとっても大事ですね！ 普段はGoogleアナリティクスのタグを埋め込んで数字を見ていくことが多いのですが、今回は思い切ってGoogleタグマネージャを使ってみることにしました。 今回のブログではGoogleタグマネージャでGoogleアナリティクスの設定方法を解説します！ 下記の画像からLIG WORKSが見れるので、よかったら見ていってくださいね♪ なぜGoogleタグマネージャを使用したのか 制作実績サイトの制作は「必要最低限のみで
プロジェクト管理はどうすれば良くなる？現役ディレクターが教えるフローのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、進捗どうですか？？？ ディレクターのともぞうです、こんにちは！ 先日、「LIG’s DIRECTION school」の「プロジェクト管理のノウハウ・ドゥハウ」の会に参加してきました。 今回講師を務めたのは、株式会社マックグラフィックアーツの合志さん。講演内容から学んだことを含め、イベントをレポートします！ はじめに：『LIG’s DIRECTION school 2016』とは そもそも『LIG’s DIRECTION school 2016』とは、LIGと日本ディレクション協会が共同で開校したスクール。なかなか体系的に学びにくい「ディレクション」を、豊富な現場経験を持つプロの講師から直接教えてもらえる内容になっています。 授業は初級もしくは上級コースがあり、それぞれ全6回、1年間かけてディレクションノウハウを習得します。なお、単体受講も可能なので参加できる回だけの参加もOKで
【Ansible入門】サーバーの構成管理をコード化してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。長野オフィスのバックエンドエンジニア、ヤスタカです。 最近長野での休日の過ごし方がわからなくなってきています。この時期ってなにしたら楽しいの？ 山登り？ さて、みなさんはサーバーの環境構築をどのように行っていますか？ 手順書を作って、ひとつひとつコマンドを間違えないようにコピペして実行……そんなやり方をしていませんか？ それでも起きてしまうのが作業ミス。。 最近では「Infrastructure as a Code」なんて言葉もよく会話にのぼるようになってきました。 Infrastructure as a Codeとは 従来の手順書を元に手動で構築してきたサーバーの環境をコード化すること。これによりサーバー構築の自動化と管理が容易になる。 今回はAnsibleを使って、サーバーの構成管理をコード化してみたいと思います。 Ansibleで何ができるの？ https://www.a
Macとさくらのサーバでの開発作業をGitで管理する
開発環境 Mac OS X 10.10.3（LAMP環境） さくら（スタンダード・プラン） ※Mac、さくら共にGit環境は既にインストール済み。 Mac（ローカル環境）で作成したファイルを、さくらのサーバへとアップロードしていく流れをGitで管理する。プロジェクトに関するディレクトリは全て新規に作成するものとする。 大まかな手順 1.さくらのサーバに中央リポジトリを作成する。 2.Macのローカル環境に中央リポジトリを複製（clone）する。 3.さくらのサーバ側にも（中央リポジトリとは別の）リポジトリを複製する。 4.Mac側でsample.htmlを作成したら、中央リポジトリに記録し全てのリポジトリにてデータを共有できるようにする。 さくらサーバに中央リポジトリを作成する まずさくらサーバにsshでログインし、適当な場所（今回は~/以下、つまりhome/ユーザ名/以下）にsample
Gitを触ってみよう。GitHubとソースツリーを使用した基本操作 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのゆたろです！ Git連載の2回目。難しい話は抜きにして、とにかく実際に触ってみましょう！ GitHubを使ってみよう！ GitHubとは、Gitのホスティングサービスの1つです。他にもBitBucket、Phabricatorなどがありますが、当記事ではGitHubを使って説明していきます。 GitHubのアカウント作成 https://github.com/ まずは、GitHubのアカウントを作成しましょう。ページ上部の「Sign up」よりアカウント登録画面に移動します。 上から順に、ユーザネームとメールアドレス、パスワードを入力して「Create an account」を押してください。 次にプランを選択して、「Finish sign up」で登録完了です。登録したメールアドレス宛に確認メールが届くので、アドレス認証も忘れずに！ 練習用リポジトリ
本当の初心者向け！Git入門のための概念から基本用語まで | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ほりでーです。 フロントエンドチームから、チーム開発には欠かせない「Git（ギット）」を基本から学ぶための連載がスタートします！ ということで、今回はその第一回目。 具体的な使い方の説明に入る前に、そもそもGitとは何か、なぜGitを学ぶ必要があるのか、という概論から入っていきたいと思います。前半ではスキルとしてなぜGitが重要視されているのか、後半ではGitに登場する基本的な概念について、初心者にもわかりやすく説明していきます！ 1. Gitが使えないと困る理由 Gitは、HTML・CSS・JavaScriptなどの コードを管理するためのツールで、世界的に定評があります。極端な話、Gitを使えるようになったからと言って、デザインが上手くなったり、すごいJavaScriptが書けたりするわけではありません。デザインやプログラミングのテクニックとは、あまり関係がないスキルなんで
【新人デザイナー必見】制作スケジュールを守るために実践したい3つの管理テクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト制作のスケジュールを引くときに知っておきたい3点はこちらの記事から Webデザイナー歴6年のマチルダです。振り返ってみれば、本当に失敗の連続でしたが、1年目のときに一番苦戦したのは「締め切りを守ること」。 業務を行う上で基本とも言えることですが、身につくまではかなり苦戦し、ときには徹夜になることもしばしばありました。そこで今回は新人デザイナーの方の参考になればと思い、自分の失敗談を踏まえながら、実際に私が行っていたスケジュール管理術をご紹介したいと思います＾＾ 締め切りを守るために実践したスケジュール管理術 1. 作業スコープを事前に確認する 「作業スコープ」とは、制作するものの量や範囲のこと。 働き始めた頃は、自分がどれくらいのクオリティーのものを、どれくらいの時間で作成できるのかがまったくわからず、想定していた作業時間の2倍くらいは時間を費やしていました。そんな折に、バナー
FinTechがいま話題！金融×ITの時代に注目のWebサービス7選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめに：FinTechって何？ そもそもFinTechとは「Finance（金融）」と「Technology（IT技術）」の2つの言葉を合体させた造語です。つまり「ITを使ったお金にまつわるツールやサービス」のことを総称して「FinTech」と言います。 今までであれば「お金を借りる」場合、知り合いや銀行などの金融機関からしか借りられませんでした。しかしIT技術を用いればネットを通じて「こういう事業をしたいからお金の支援をしてください！」と、すなわち “クラウドファンディング” という形で不特定多数の人から資金を集めることができますよね。 クラウドファンディングは一例に過ぎず、金融という括りの中では「資金調達」の他にも「保険」「投資」など広い分野でFinTechが広がりつつあります。最近では国策としてもFinTechが注目されており、金融庁が平成27年度の方針の項目としてFinTechを
Photoshop Lightroomでレタッチ♡アメリカ大陸を横断しながら使ってみたよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。元いいオフィス管理人で、現在はフォトグラファーのゆうです。 先日、『べべ旅〜ひとりぼっちのアメリカ編〜』という企画で一ヶ月間アメリカ大陸を横断しながら撮影をするというお仕事をしてきました！ そこで今回はLightroomを使い、写真の管理からレタッチまで、写真をひとつの作品に仕上げるためのノウハウをご紹介したいと思います。 デジカメでの撮影は、撮ってから一手間加えるだけですごく良い写真になるので、ぜひみなさまも参考にしてみてくださいね♡ 【管理編】大量の撮影データを効率よく選別しよう べべ旅では毎日1,000枚〜2,000枚の写真を撮り、それをその日のうちに40枚くらいに選別して作品に仕上げていたので、大量に撮った画像を効率よく選ぶことが重要でした。実際にどうやって選別していたか、ご紹介いたします！ Lightroomで簡単に写真の整理をしよう 写真選定に大活躍するのが、Lig
エクセル（Excel）で「名前」を管理すれば、数字を使わなくても関数が使える♩ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、管理部のゆりえです。 みなさんエクセルで表を作るとき、毎回同じところを選択してコピーしたり、数式の中でセルの位置を入力したりするのが「ちょっと大変だなあ＞＜」と思うことはありませんか？ 私はよくあります。 今回は、そんな「ちょっと大変だなあ＞＜」な気持ちが少し軽くなる、「名前」という機能をご紹介します。 「名前」ってなに？ エクセルのセルは、A1やF3のように、その位置の「行」と「列」をアルファベットと数字で表します。また、1つのセルではなく範囲を表す場合は、A1:F3のように、左上端と右下端をコロン「:」で挟んで表示します。 そんなセルや範囲には、名前を付けることができるんです！ そのまま「名前」という機能です。なければ困る機能ではないので、知らない方もいらっしゃるかもしれませんが、使い方によっては数字を入力せずに関数が使えるちょっと便利な機能でもあります。 「名前」を使うと
Facebookページの管理者が個人アカウントでFacebookページの投稿に「いいね！」をする方法
Facebookページの管理者が個人アカウントでFacebookページの投稿に「いいね！」をする方法を紹介します。 このエントリーは2015年6月現在のものです。 １．問題点 自分が管理人になっているFacebookページの（他の管理人の）投稿に「いいね！」をしようと思って、Faceboookページの画面に表示された投稿にある「いいね！」をクリックすると、Facebookページの管理人として扱われるようです。 ということで今更な感じですが、個人アカウントでFacebookページの投稿に「いいね！」する方法を紹介します。 2015.06.28追記：２項の作業は該当のFacebookページでも実施できるように仕様が変更されたようです。 ２．個人アカウントでFacebookページの投稿に「いいね！」する 個人アカウントでFacebookページの投稿に「いいね！」をするには、まず個人アカウントのニ
Webディレクターがプロジェクト管理をする上で大事な「巻き込む」ということ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、いいオフィス支配人のセコです。以前はディレクターをしておりました。 本日は、Web制作において非常に重要なポジションであるディレクターについて書きたいと思います。 Webディレクターで一番大事なこととは何か？ 制作されるサイトのクオリティは、Webディレクターの良し悪しによって全くと言っていいほど変わってきます。したがって、いい制作会社にはいいディレクターが揃っていると言っても過言ではないでしょう。 では、Webディレクターで一番大事なことってなんでしょうか？ ときどき、ディレクターを始める人に聞くと「クライアントの要望を聞き出すこと」や「納期など含め、約束を守ること」という答えをもらいます。もちろん、どれも間違えではなく必要なものです。 しかし、私がディレクターを続けてきた中で一番重要だと思ったのは「クライアントとチームを巻き込むこと」です。 巻き込むということ まず理解して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイナーが知っておきたいPhotoshopのPSDファイル、レイヤー、エフェクト、フォントやテキスト、素材の効率的な管理方法
生活費の節約に役立つおすすめのクレジットカード2024！お得に家計改善！
