Design カテゴリの記事

春の入門連載の1日目です。この記事ではFigmaを使って簡単なログインページを作ります。よくネットで見る参考情報では、入力フォームのキーボード入力などインタラクション性にかけるものが多かったので、オーバーレイを利用して動きをつけてアプリイメージを湧きやすくするように工夫します。

PlantUMLで使えるテーマについてのご紹介です。以前、チームで機能設計するためのPlantUML標準化の記事でも書かせていただきましたが、PlantUMLのデフォルトカラーって少しドライですよね。色の好みは人それぞれで、あれはあれでカッコよさはありますが、複雑な図は少しでも可愛く描きたい・楽しく見たいものです。

モバイル開発をする場合、デザインはAdobe XDかFigmaか何かしらのワイヤフレームツールを使うと思います。本エントリーではそれらをもとにアプリケーションを作成したときのTipsを紹介します。なお、デザインする人はステークホルダーの人に共有したりすると思うので有料版のXDの方が良いと思いますが、Flutter開発する人はXDファイルを持っている or 共有してもらえたら、スターター版で大丈夫です。

新しく参画したプロジェクトが今後Figmaを使ってプロトタイプを作るということで、最近Figmaのキャッチアップをしています。「実際に何かを作ってみる」より良いキャッチアップ方法は存在しないだろう、ということで早速チャレンジしてみました。キャッチアップのために思いついたチャレンジは２つ：A. 架空のアプリを一からデザインB. 既に存在している何かのリデザインこの記事では「B. 既に存在している何かのリデザイン」の過程を紹介していきます。

皆さん、Marpはご存じでしょうか？Marpとは、Markdown記述形式でスライドを作成するができるツールです。VSCodeにインストールことで、VSCode上でスライドの作成を行うことができるようになります。まさにあったらいいなが具現化したようなツールです。もちろん、Marpから作成されたスライドはパワポでの再編集も可能で、骨子づくりはMarp、仕上げはパワポ、なんて合わせ技も行えます。今回はそんな[Marp]を業務でも平常利用できる状態に持っていくべく、スライドのテンプレートの仕込みをやってみたいと思います。

今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。z

Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。Figmaはユーザーインターフェース（UI）のデザインをブラウザ上で簡単に作れるデザインツールです。デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています

これさえあればサービス構成図がだいたい描けるアイコンセットを公開します！サービス構成図は、システム構成に加え、様々な立場のプレースホルダーやクライアント機器、さらに物理的な場所や移動手段の概念が含まれます。これらのアイコンを都度探し、思ったようなモチーフにたどり着くまでには、予想外の手間がかかってしまうこともあります。そういった場合にぜひこのアイコンを活用してみてください

これさえあればシステム構成図がだいたい描けるアイコンセットを公開します！