サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
asagi-design.com
UI構築のためのJavaScriptライブラリ「React」製の静的サイトジェネレーター「Gatsby」を使ってWebサイトを作りました。後半ではFirebaseでサイト公開まで行いますが、前半ではコンパイルまで。 今回作ったWebサイト https://imairisako.com/ 本記事は『あさぎデザインひとりAdvent Calendar 2019』の7日目のエントリーです。 Gatsbyを使う準備をする npxでインストールしました。Macのターミナルを起動して、下記を実行します。 Terminal npm install --global gatsby-cli Terminal gatsby --version バージョンが確認できれば、インストールはOK。 Terminal gatsby new app https://github.com/gatsbyjs/gatsby-s
2018年はAdobe XDがぐっと使いやすくなり、プロトタイプ制作が捗った年でした。ある程度XDを使い慣れた人向けの記事は出揃ってきたと思うので、初心者さんでも「明日から作れる!」プロトタイプの作り方をご紹介します。 この記事は「Adobe XD Advent Calendar 2018」9日目の記事です。 今回プロトタイプに盛り込む機能は以下の通り。 スプラッシュ画像 インクリメンタルサーチ(文字を入れるとリアルタイムで絞り込む) 「もっと見る」アコーディオン風ボタン ポップアップ(モーダルウィンドウ) まずは、プロトタイプの画面デザインを作る まずは画面を作らないといけません。 1から作ってもいいんですが、XDで使える便利なUIキットが配布されているので活用しましょう。(今回はiOS風文字入力キーボード、ヘッダーなどはUIキットを使っています) Apple Design Resour
2018年は受託案件のみ時間を測っていたのですが、意外とお問い合わせへの返信や細かいやり取り、作業に時間がかかっていることがわかったので、そのあたりにかかった時間も記録するようにしました。あとはプライベートでの制作もどれくらい時間がかかったかチェックしています。 急に稼働時間の表などを作るときも安心 クライアントさんから急遽「案件ごとの稼働時間リストちょうだい!」と言われても、案件名をメモして、クライアントさんの社名をラベルとして登録しておくとさくっと月単位・週単位などの稼働時間を出せるのですぐに対応できます。 クライアントラベルは色を選べるので、お取引先のコーポレートカラーを登録しておくとひと目でわかって便利です。 『文芸美術健康保険』で保険料を一定額に抑える 国民健康保険の場合、住んでいる自治体や所得によって金額が変わります。 毎年変わる保険料にドキドキしたくなかったので、文芸美術健康
WebデザイナーとしてずっとSketchを使ってきましたが、2018年はXDが活躍する機会も増え、現在はほぼ半々の頻度で使っています。どんなケースでどのツールを使っているかをまとめてみました。 本記事は「Design Tools Advent Calendar 2018 – Adventar」の8日目の記事です。 この記事を書いているデザイナーの属性 ひと口に「Web/UIデザイナー」と名乗っても人によってしているお仕事はさまざまです。この記事を書いている人間の属性は下記の通り。 フリーランスのWebデザイナー 地方在住なので、基本は100%リモートワーク Macユーザー(お取引先もMac率高め) コーポレートWebサイト制作、Webサービス制作、アプリのUIデザインなど、なんでもやる デザインカンプ制作とプロトタイプ制作を同じくらいやってる HTML/CSSコーディングもわりとやる よう
配色のブレを防ぐ 案件、プロジェクトをまたいで使う色は「Global Colors」パレットとして登録しておけばどのSketchファイルでも使えます。特定の案件だけで使いたい配色は「Document Color」パレットとして登録しておいて、そのSketchファイル内のみ使えるようにしています。 SketchファイルをコピーすればDocument Colorは引き継がれますし、プラグインで他のSketchファイルに読み込むこともできます。 Sketch Palettes CSSフレームワークを導入するプロジェクトにも最適 Sketchには「Sketch App Sources」というSketch形式(.sketch)の素材配布サイトがあります。「Bootstrap」「Foundation」などのCSSフレームワークのUIキットも揃っています。 Bootstrap 4 Beta 2 Libr
本エントリーは Sketch Advent Calendar 2016 24日目のエントリーです。今回は受託制作をメインにやっているWebデザイナーの筆者が、業務でSketchをどのように使っているかをご紹介します。 ※本記事は2016年12月24日に投稿したエントリーを加筆・修正しています。 前提として、筆者のスキルなど Sketchの使用歴は2014年10月から。(Sketch 3 から) 初心者向けの動画講座(※現在は公開終了)を作れる程度にはオペレーションを習得しています。 HTML、CSS、飛び抜けてできるわけでもないが、きちんと動くものを作れる。(JavaScriptはプラグインで乗り切っている) CMSの導入を前提としています。(今回はa-blog cms ) 1. ワイヤーフレーム作成 チームのディレクターが作ったサイトマップをもとに、Webサイトのワイヤーフレームを作成し
フリーランスのWebデザイナーとして独立開業してから6ヶ月が経ちました。知っていて役に立ったこと、もっと勉強しておけばよかったこと、色々と見えてきたのでブログにまとめます。 このエントリーは「 フリーランスAdvent Calendar 2017 」の10日目の記事です。 「あさぎデザイン」について 名古屋在住のフリーランスWebデザイナーが、ひとりで屋号を立ててやっています。独立までの約3年間はWeb制作会社に新卒で就職し、デザイナーとして働いていました。(学生時代からこまごまと色々な制作会社のお手伝いをしていたので、業界歴はもう少し長め) 持っていてよかったスキル・知識 Webサイト公開までひと通りこぎつけられるだけのスキル 私はデザインに特化したスペシャリストタイプというよりは、設計・デザイン・コーディング・CMS組み込みまで広く(その分、多少の浅さは否めない)こなせるゼネラリストタ
現在、iPadでのイラストの作成には「procreate」というアプリを使用しています。多彩なブラシがデフォルトで使えるのでイラストを描くぶんにはとても使いやすく楽しいのですが、加工となると痒いところに手が届かない部分がありました。 CLIP STUDIO PAINT は画像加工でも快適です。レイヤーのサイズ変更や色調補正レイヤーの追加(画像を直接加工しないので、後からサクッと加工前に戻せる)ができるのはとても便利。 調子に乗ってレイヤーやマスクを追加しまくってみましたが、このくらいのレイヤー数なら動作は快適でした。(ここはiPad自体のスペック次第という気もします) 使いどころを考える CLIP PAINT STUDIO にはいくつかモデルがあり(モデル別の機能比較)、iPad版は上位モデル「CLIP PAINT STUDIO EX」相当の機能があるとのことです。ということで、機能面での
お気に入りの文房具のような 手に馴染むユーザーインタフェースとWebデザインを あさぎデザインは、Webサイト制作、サービスやアプリのUIデザインを通して、お客さまの「伝えたい思い」を「伝わる情報」に整理するお手伝いしているフリーランスのデザイン事務所です。 全国どこからでもご依頼いただけます。 お手伝いできること Web制作 & Webサービス/アプリのUIデザイン Webサイト制作 更新しやすさ・運用を大切に 設計からビジュアルデザイン、HTML / CSSコーディング、CMS (WordPress、a-blog cms) 組み込みまでホームページ制作をワンストップでご相談いただけます。デザインだけ、コーディングだけでも承れますので一度ご相談ください。 UIデザイン Webサービス、アプリなど サービスやアプリのUI設計・UIデザイン。Gitを活用したリモートワークが中心です。自社にデ
2019年12月2日 価値抽出を具体例で学びたい人のための『なぜ「つい買ってしまう」のか? ~「人を動かす隠れた心理」の見つけ方~』
このページを最初にブックマークしてみませんか?
『あさぎデザイン Webサイト制作・UIデザイン』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く