BLOG

Windows環境Gitインストール完全版(Sourcetree、TortoiseGit)【2022年最新版】
投稿日:2022年3月30日

Git関連のインストールは選択項目が多いため、慣れていない人にとっては何を選んでよいのか分からないことがあるかもしれません。 そこで今回は画像と補足をいれながら ①Git for Windows Version 2.34.1 ②Soucetree Version 3.4.7 ③Tor ...

gulp+EJS+JSONで大量のHTMLを効率的に生成する
投稿日:2022年1月5日

CMSを構築するほどでもないけれど、複数のページをさくっと作りたい。もしくは、PHPが使えない・インクルードができないサーバーでもページを量産したい。そういったとき、手軽にHTMLを生成できる「EJS」がとても便利です。EJSを活用すると、JSONファイルでコンテンツを一括管理して、それを元に静 ...

初学者が躓きやすいGitの使い方
投稿日:2021年12月23日

Gitとはファイルなどへの変更履歴を記録しそのバージョンを管理するツールで、誰がソースコードのどこを変更したのかなどを管理するためのものです。 エンジニアやコーダーの実務においてGitは必須知識だと思います。 しかし使い始めの時は何をしているのか分からず戸惑ってしまう事がありました。 ...

CSSの数学関数を使って記述をスマートに!【calc(), min(), max(), clamp()】
投稿日:2021年12月16日

CSS関数をご存じですか? よく使うのがcalc()やtranslate()、rgba()などで、関数名 + ()で記述されるもののことを指します。 今回は、中でもCSSの数学関数に焦点を絞って解説していこうと思います。 calc()は普段から使っている方も多いと思いますが、min() ...

作業時間を軽減!コーディングに便利なコード作成・変換ツール5選
投稿日:2021年12月13日

コーディングをしていく中で 「どういうレイアウトにすれば表現できるかな...」 「SCSSで構築してるのに参考サイトがCSSでしか紹介していない...」 なんて思うこともあるかと思います。 調べれば表現したいレイアウトの方法やSCSSで紹介しているサイトがあると思います。 ですが、 ...

【VS Code】Sassで生成されるcssにも対応!自動アップロードの設定方法
投稿日:2021年8月31日

FTPクライアントを立ち上げて変更の度に手動アップロードって意外と手間ですよね。 VS Codeでは拡張機能を使って自動アップロードが可能です。 sassやwebpackのコンパイル等外部からファイルの変更が行われた時にも対応できる設定を紹介していきます。 [toc] SFTPのインスト ...

【効率UP!】PC作業がはかどる無料便利ツールまとめ
投稿日:2021年1月15日

入社して仕事に慣れてきた時、こんな状況になったことはありませんか? 「作業した後のデスクトップが汚い...」 「キャプチャをもっと手早く簡単に撮りたい...」 筆者も同じ状況に悩まされました。 フォルダを5つ以上も開いていたり...。余計なところまでキャプチャを撮ってしまったり. ...

25歳・未経験からWebエンジニアになってみた【中途採用ブログ 2020年7月~9月】
投稿日:2020年9月29日

こんにちは!2019年の10月にBRISKへ入社しました、Kです。 まずは軽く自己紹介しておきます。 K 年齢:25才 大学専攻:工学部・機械システム工学科 前職:技術系派遣会社(1年勤務) 自慢できること:TOEIC860 ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)
投稿日:2020年9月15日

この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。 ちなみに、この記事は「【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)」の続編になります。 まだ読んでいない方はそちらを読んでからの方がスム ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)
投稿日:2020年9月15日

WEBアプリやそれに近い大規模な案件を進めていくにあたって、共通のパーツってありますよね。 LP(ランディングページ)であれば、そういったものはないのですが、ある程度規模が大きくなるとそういった共通パーツ(モジュールまたはコンポーネント)が何回も登場して、それを組み立ていくというのはよ ...

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集
投稿日:2020年9月9日

突然ですが、みなさん。 コーディング(HTML,CSS)得意ですか? 筆者は、「得意です!」と自信をもって言えるほどではありません。汗 「どうやって再現したらいいんだ...」と、頭を悩ませ時間が溶けていくことが多いです。 しかし、コーディングでは「スピード」が求められますよね。 ...

【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
投稿日:2020年7月8日

デザイン業務において避けて通れない作業のひとつに画像の「切り抜き」があります。 WEBサイトやバナーの中に、素材写真から綺麗に切り抜いた製品や人物の画像が効果的に入っているとそれだけでデザインがぐっと引き立ちます。 皆さんは普段どんな方法で画像の切り抜きを行っているでしょうか。 基 ...

Adobe XDで作れるデザイン・作れないデザイン(PhotoShopとの比較)
投稿日:2020年6月26日

PhotoShopはデザイナーなら誰もが一度は使ったことがあるデザインツールだと思います。 webのデザイン作成をPhotoShopで行うwebデザイナーも多いですよね。 そこで皆さん、Adobe XDというデザインツールをご存じでしょうか? 今回はXDをPhotoShopと比 ...

【テレワークにもオススメ】デザイン修正指示ツール徹底比較!【AUN・MONJI】
投稿日:2020年4月9日

コロナウイルスの影響で、在宅勤務やテレワークスタイルになった会社も多いのではないでしょうか? 修正指示をいつも口頭でしていた場合、依頼者・担当者に距離があるとどうしてもやりとりがしづらくなってしまいます。 PDFに手書きをして送る場合は担当者が文字を判別出来なかったり、単語のコピペ出 ...

今すぐコーディング爆速化!プロ仕様なChrome検証ツールの使い方
投稿日:2020年2月28日

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール(ディベロッパーツール)のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

【簡単デザイン】非デザイナーが無料デザインツール「Canva」で簡単にアイキャッチを作る方法
投稿日:2020年2月12日

ブログのアイキャッチ画像を作ろうとして、まずは構図を考えて、文字や画像を配置して、色を決めて、ジャンプ率を設定して、やっぱりここはこうして、いやこうでもない…なんて苦戦している間に数時間経っていた! ということはありませんか。デザインに正解はないので、試行錯誤しているうちにあっという間に午後 ...

コーディングをより効率的に!楽にHTMLやCSSを生成できるジェネレータ8選(おまけあり)【2020年度版】
投稿日:2020年2月5日

「毎回テーブルタグ書くの、面倒くさい…」と思った経験はありませんか? Webエンジニアにとって、サイトを作るときには必ずコーディングをおこないますが、いろいろなサイトを作っていても共通して出てくるパーツは意外とありますよね。ただ、都度入力していくのは時間もかかって骨も折れる作業です。 ...

【AdobeXD】グループの上からでもアウトライン化(パスに変換)できるプラグインを作った話
投稿日:2019年12月26日

Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実で ...

【厳選10個】サイト制作の現場から厳選!すぐに活躍するchromeプラグインまとめ【全部無料】
投稿日:2019年10月2日

みなさんはブラウザのプラグインを使っていますか?YouTubeの広告をブロックしてくれるものや、YouTubeの再生速度を変えてくれるプラグインなどは便利ですよね。 今回はYouTubeのプラグインの話ではなく、「Webサイト制作で役に立つ」Google Chromeプラグインについてご紹 ...

脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
投稿日:2019年8月16日

突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデ ...