XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント
関わっている現場の一つで、デザインツールをAdobe XDからFigmaに移行しました。その時に今までFigmaを使ったことのないメンバー向けにFigma勉強会などを開催し、すぐに使い始められるようサポートをしました。 その経験の中で、これからFigmaを使い始めるXDユーザーが理解に時間がかかる点や躓くところをまとめてみました。 ファイル構造と管理構造 XDは1つのXDファイルの中にアートボードで各種画面を作成します。またCreative Cloudのグループ版およびエンタープライズ版ではチーム内でXDファイルを共有できます。 Figmaファイル内の構造 Figmaは1つのFigmaファイルの中に、pageという階層があります。pageの中にFrameで各種画面を作成します。 Figmaアカウントのファイル管理構造 Figmaでは1アカウントごとにDraftとTeamがあり、それらの配下
フォルダに放り投げてしまっていませんか？Webディレクターの適切な素材データ管理方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト用素材データを送受信する際にこんなこと思い当たりませんか？ 素材をフォルダに放り投げてしまい、必要なときに探しづらくなってしまっている とりあえず手元にあるデータを送って終了にしてしまっている お客様とのやり取りは丁寧にするけれど、社内のデータ管理は同じように丁寧にできていない どの素材を送ったかよくわからなくなってしまうことが多々ある 今日こそはフォルダやデータを整理しようと思っているけれど、いっこうにその日が来ない 個人のスマホで撮影した写真データであれば、日付抽出、お気に入り、撮影地など自動で振り分けされ、ファイル名を気にする事は日常ほぼありません。 でも、Webディレクターの仕事の現場では、画像データやテキストなどあらゆるデータをお客様から受領し、デザイナー・エンジニアが使いやすいよう整理、ファイル形式変更、リネームして渡すという場面が多く見られます。 ルールが揃ってい
Web系エンジニアなら知っておきたいツール5選。ハマりポイントも解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさーい！ 2021年11月にジョインしたうーまーです。沖縄からフルリモートでバックエンドとフロントエンドのお仕事をさせてもらってます。 入社直後って、先輩たちの顔を覚えたり社内文化にとまどったり、まっさらなマシンを受け取って初期設定したりと割と大変ですよね。特にマシンの設定なんて、一度してしまったらなかなか変更することないので、基本的なことを忘れてしまってたりしますよね。 ということで、転職したての僕がLIGに入って最初つまづいた事例を交えながら、転職前に押さえておきたいツール5選を紹介したいと思います。 Web系エンジニアが使うツールの話なので、転職希望者だけでなく、就職・組織で働くのが初めてって方にも刺さる内容になっています。 1.コマンドプロンプト（ターミナル） windowsで言うコマンドプロンプト、macだとターミナル。いわゆる黒い画面。 少し前（と言っても10年くらい）まで
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
～ローカルからサーバーへ～：簡単にできる公開方法を調べてみた - Qiita
はじめに この記事では、詳しい公開方法については記載はしません。 実際に、公開するための様々な方法についてご紹介します。 ①heroku herokuとは、 「PaaS」と呼ばれるwebサービスを公開するのに必要な環境を提供してくれるサービスです。 herokuへ「デプロイ」とよく言われますが、 これは、 herokuという場所にサービスを置いてくる というイメージです。 herokuは基本的には、無料で使えます。 ただ、重いサービスだとwebの挙動が遅くなってしまうこともあります。 その場合は課金を。（課金する場合は800円程度） 詳しいことは下の記事を参考に。 herokuの使い方までわかりやすく書かれています。 【参考】：【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説 ②Netlify 静的なWEBサイトのホスティングサービスです。 ホスティングとは、つまりサーバー
Web制作がオンラインで完結するってほんと？LIGとお客さまとの距離を縮めるツールをご紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回の相談会はGoogle Meetなどのビデオ会議ツールを用いることで、完全オンラインにて実施しています。さらに、LIGでは実際にご依頼いただいたあとも、引き続きオンライン（リモート）での制作進行が可能です！ そこで今回は、LIGがリモート環境下で制作する場合、どのようなツールを用いているのかを公開いたします。さらに過去実績として実際にリモート環境下で制作したWebサイトのご紹介もさせてください！ オンライン（リモート）での制作を可能にしているツールを公開 LIGではさまざまなツールを活用してオンライン（リモート）での制作を行っています。制作の際にはお客さまにも導入いただくことで円滑な進行を実現しています。 Slack（チャットツール） チャットツールはおもにSlackを使用しています。LIGのSlackワークスペースにお客さまをご招待し、日々ご連絡のやりとりをさせていただいています。
【2019年版】Macユーザーに超絶おすすめのアプリ／ツール10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
オフィス外で作業することが多いため、これは超絶愛用しています。人目に付くカフェ等の環境で作業されている方々におすすめです。周囲にMacの画面情報を見えづらくするだけでなく、ブルーライトカット効果もあり、一石二鳥。 また、マグネット型になっているので、取り外しが容易で、隣の人に画面を見せたいときには、即座に取り外しができます。 Nums ナムス（ランチャー トラックパッドカバー） Nums これまでにないトラックパッド トラックパッドが、なんとテンキーになったりアプリランチャーになる優れものです。 管理業務を行うと、スプレッドシートや電卓作業が増えていきます。外出時など、外付けのテンキーキーボードがにないときに、このランチャーを立ち上げるだけで、トラックパッドをテンキー化でき、作業効率が格段にあがります。 業務効率化ツール・アプリ Memory Clean 2（メモリ解放／管理） Memor
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を書く時に
バージョン管理システム「Git」の使い方はどのように教えるのが良いのか？
GitはLinuxの生みの親であるリーナス・トーバルズによって開発されたバージョン管理のツールで、数々のバージョン管理システムのなかで最も有名なものとなっています。しかし、Gitの考え方の中には初めて利用するという人にとっては分かりにくいものも存在します。エンジニアのレイチェル・M・カルメナさんが、Gitの基本的な概念について図を用いてまとめています。 How to teach Git | Rachel M. Carmena https://rachelcarmena.github.io/2018/12/12/how-to-teach-git.html カルメナさんが解説を書こうと思ったのはGitを使い始めた同僚のモニターに下の画像のようなポストイットが貼られていたことがきっかけだそうです。ポストイットには「add」「commit」「push」のコマンドが書かれていますが、その同僚は3つの
Googleカレンダーユーザーは知っておくべき神ワザ！ひとつ上のタスク管理術 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Web事業部マネージャーのさささん（さっさん）です。 今回は職種関係なくビジネスパーソンのみなさんに読んでもらいたいネタを提供したいと思います。 さて、毎日仕事をされているみなさんは自分のタスク（業務）をどのように管理していますか？ プロジェクトであればもちろんプロジェクト管理ツールを使ってタスクを細分化してタスクの一つひとつを管理していると思います。 でもそのタスクって、だいたい開始日と終了日（期日）が設定されているもので、実際いつやるのか（何時から何時までにやるのか）まではなかなか管理されていないのではないでしょうか？ 「いつやるのか」を明確にするために、ひとつヒントがあります。 それはカレンダーツールを活用することです。 ということで、今回はカレンダーを使ったタスク管理について紹介いたします。 カレンダーを使ってタスクを管理しよう では実際に、どのようにカレンダーのツール
1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Marketing & SEO A Better Google Analytics AlternativeOur recent migration to GA4 left a lot to be desired and led us to explore for better google analytics alternatives. We tried just about everything out there, including Plausible, Fathom, and several others, all with their own pros and cons. The biggest hurdles were: limited features and higher costs.… CSS offers an array of tools that, when use
複数の編集者がいるWordPressの管理を楽にする、プラグインまとめ「10 WordPress Plugins to Improve Multi-Author Websites」
複数の編集者がいるWordPressの管理を楽にする、プラグインまとめ「10 WordPress Plugins to Improve Multi-Author Websites」 使いやすく、編集も容易に可能なWordPressは、複数人でWordPressの編集に関わることも多いと思います。今回ご紹介するのは、そんなWordPressを管理する際に使い易いオススメのプラグインをまとめた「10 WordPress Plugins to Improve Multi-Author Websites」です。 複数人編集ならではの不透明さや不便さを解消してくれる、あると便利なプラグインが10種類紹介されています。今回はその中から、ピックアップして幾つかご紹介いたします。 詳しくは以下 Editorial Calendar — WordPress Plugins Googleカレンダーのように、直
Custom Post Type UIでカスタム投稿を設定・バージョン1.4対応解説
Custom Post Type UIでカスタム投稿（カスタムポスト）を設定 Custom Post Type UIとは？ WordPressの機能を拡張する仕組みに「3大カスタム」と呼ばれる機能があります。 カスタムフィールド カスタム投稿（カスタムポスト） カスタムタクソノミー（カスタム分類） このうち、「カスタム投稿（カスタムポスト）」「カスタムタクソノミー」を管理するためのプラグインが「Custom Post Type UI」です。 この記事では、カスタム投稿（カスタムポスト）、カスタムタクソノミーを管理するプラグイン「Custom Post Type UI」について解説を行います。 カスタム投稿（カスタムポスト）、カスタムタクソノミーを使いこなすと、WordPressの可能性が格段に広がるのですが、ただ WordPressを使っているときと違ってぐっとハードルも上がりますので、プ
管理画面で設定できる！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倍くらいは時間を費やしていました。そんな折に、バナー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
